[css-grid] Implement Baseline Alignment for grid items
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 23 Nov 2018 11:04:23 +0000 (11:04 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 23 Nov 2018 11:04:23 +0000 (11:04 +0000)
https://bugs.webkit.org/show_bug.cgi?id=145566

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

Updated test expectations of severla tests, that are now passing with the new code.

* resources/import-expectations.json:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-002-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-005-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-006-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-007-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-008-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003-expected.txt:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html:
* web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-002-expected.txt:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002-expected.txt:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002-expected.txt:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-002-expected.txt:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002-expected.txt:
* web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002-expected.txt:

Source/WebCore:

This patch impements the Baseline Self-Alignment feature for grid items according to
the CSS Box Alignment specification [1].

This new layout logic is handled by the Self-Alignment (justify-self and align-self)
and Default-Alignment (justify-items and align-items) CSS properties.

This feature allows users to align the grid items sharing a Baseline Alignment Context,
either row or column contexts, based on their respective baselines.

[1] https://drafts.csswg.org/css-align-3/#baseline-align-self

Tests: fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html
       fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html
       fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html
       fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html
       fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html
       fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html

* Sources.txt:
* rendering/GridBaselineAlignment.cpp: Added.
(WebCore::GridBaselineAlignment::marginOverForChild const):
(WebCore::GridBaselineAlignment::marginUnderForChild const):
(WebCore::GridBaselineAlignment::logicalAscentForChild const):
(WebCore::GridBaselineAlignment::ascentForChild const):
(WebCore::GridBaselineAlignment::descentForChild const):
(WebCore::GridBaselineAlignment::isDescentBaselineForChild const):
(WebCore::GridBaselineAlignment::isHorizontalBaselineAxis const):
(WebCore::GridBaselineAlignment::isOrthogonalChildForBaseline const):
(WebCore::GridBaselineAlignment::isParallelToBaselineAxisForChild const):
(WebCore::GridBaselineAlignment::baselineGroupForChild const):
(WebCore::GridBaselineAlignment::updateBaselineAlignmentContext):
(WebCore::GridBaselineAlignment::baselineOffsetForChild const):
(WebCore::GridBaselineAlignment::clear):
(WebCore::BaselineGroup::BaselineGroup):
(WebCore::BaselineGroup::update):
(WebCore::BaselineGroup::isOppositeBlockFlow const):
(WebCore::BaselineGroup::isOrthogonalBlockFlow const):
(WebCore::BaselineGroup::isCompatible const):
(WebCore::BaselineContext::BaselineContext):
(WebCore::BaselineContext::sharedGroup const):
(WebCore::BaselineContext::updateSharedGroup):
(WebCore::BaselineContext::findCompatibleSharedGroup):
* rendering/GridBaselineAlignment.h: Added.
(WebCore::BaselineGroup::maxAscent const):
(WebCore::BaselineGroup::maxDescent const):
(WebCore::BaselineGroup::size const):
(WebCore::isBaselinePosition):
(WebCore::GridBaselineAlignment::setBlockFlow):
* rendering/GridLayoutFunctions.h:
* rendering/GridTrackSizingAlgorithm.cpp:
(WebCore::gridAxisForDirection):
(WebCore::gridDirectionForAxis):
(WebCore::GridTrackSizingAlgorithm::availableSpace const):
(WebCore::GridTrackSizingAlgorithm::isIntrinsicSizedGridArea const):
(WebCore::GridTrackSizingAlgorithmStrategy::logicalHeightForChild const):
(WebCore::GridTrackSizingAlgorithmStrategy::minContentForChild const):
(WebCore::GridTrackSizingAlgorithmStrategy::maxContentForChild const):
(WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
(WebCore::GridTrackSizingAlgorithm::canParticipateInBaselineAlignment const):
(WebCore::GridTrackSizingAlgorithm::participateInBaselineAlignment const):
(WebCore::GridTrackSizingAlgorithm::updateBaselineAlignmentContext):
(WebCore::GridTrackSizingAlgorithm::baselineOffsetForChild const):
(WebCore::GridTrackSizingAlgorithm::clearBaselineItemsCache):
(WebCore::GridTrackSizingAlgorithm::cacheBaselineAlignedItem):
(WebCore::GridTrackSizingAlgorithm::copyBaselineItemsCache):
(WebCore::GridTrackSizingAlgorithm::setup):
(WebCore::GridTrackSizingAlgorithm::computeBaselineAlignmentContext):
* rendering/GridTrackSizingAlgorithm.h:
* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::firstLineBaseline const):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
(WebCore::RenderGrid::placeItemsOnGrid const):
(WebCore::RenderGrid::performGridItemsPreLayout const):
(WebCore::synthesizedBaselineFromMarginBox):
(WebCore::RenderGrid::isBaselineAlignmentForChild const):
(WebCore::RenderGrid::baselinePosition const):
(WebCore::RenderGrid::firstLineBaseline const):
(WebCore::RenderGrid::inlineBlockBaseline const):
(WebCore::RenderGrid::columnAxisBaselineOffsetForChild const):
(WebCore::RenderGrid::rowAxisBaselineOffsetForChild const):
(WebCore::RenderGrid::columnAxisOffsetForChild const):
(WebCore::RenderGrid::rowAxisOffsetForChild const):
* rendering/RenderGrid.h:

LayoutTests:

Most of the baseline realated tests pass now; just a few still fail because of unrelated bugs.

* TestExpectations: Removed several entries, related to the baseline tests that are now passing.
* fast/css-grid-layout/grid-align-baseline-expected.txt:
* fast/css-grid-layout/grid-align-baseline-vertical-expected.txt:
* fast/css-grid-layout/grid-baseline-expected.html:
* fast/css-grid-layout/grid-baseline-margins-expected.html:
* fast/css-grid-layout/grid-baseline-margins.html:
* fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt:
* fast/css-grid-layout/grid-baseline-must-respect-grid-order.html:
* fast/css-grid-layout/grid-baseline.html:
* fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html: Added.
* fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt:
* fast/css-grid-layout/grid-self-baseline-two-dimensional.html:

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

74 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt
LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt
LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html
LayoutTests/fast/css-grid-layout/grid-baseline-margins.html
LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt
LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html
LayoutTests/fast/css-grid-layout/grid-baseline.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt
LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-001-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-005-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-006-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-007-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-008-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002-expected.txt
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Sources.txt
Source/WebCore/rendering/GridBaselineAlignment.cpp [new file with mode: 0644]
Source/WebCore/rendering/GridBaselineAlignment.h [new file with mode: 0644]
Source/WebCore/rendering/GridLayoutFunctions.h
Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp
Source/WebCore/rendering/GridTrackSizingAlgorithm.h
Source/WebCore/rendering/RenderBlockFlow.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index e4b027e..fc75679 100644 (file)
@@ -1,3 +1,36 @@
+2018-11-23  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Implement Baseline Alignment for grid items
+        https://bugs.webkit.org/show_bug.cgi?id=145566
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Most of the baseline realated tests pass now; just a few still fail because of unrelated bugs.
+
+        * TestExpectations: Removed several entries, related to the baseline tests that are now passing.
+        * fast/css-grid-layout/grid-align-baseline-expected.txt:
+        * fast/css-grid-layout/grid-align-baseline-vertical-expected.txt:
+        * fast/css-grid-layout/grid-baseline-expected.html:
+        * fast/css-grid-layout/grid-baseline-margins-expected.html:
+        * fast/css-grid-layout/grid-baseline-margins.html:
+        * fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt:
+        * fast/css-grid-layout/grid-baseline-must-respect-grid-order.html:
+        * fast/css-grid-layout/grid-baseline.html:
+        * fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt:
+        * fast/css-grid-layout/grid-self-baseline-two-dimensional.html:
+
 2018-11-22  Dean Jackson  <dino@apple.com>
 
         Implement WebGPUQueue and device.getQueue()
index 41ffe54..bd432c7 100644 (file)
@@ -580,50 +580,6 @@ webkit.org/b/165062 fast/css-grid-layout/grid-baseline-margins.html [ ImageOnlyF
 webkit.org/b/169271 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html [ ImageOnlyFailure ]
 webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html [ ImageOnlyFailure ]
 webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html [ ImageOnlyFailure ]
-webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html [ ImageOnlyFailure ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-01.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02-b.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-03.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-04.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-05.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-06.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-07.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-01.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-02.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-03.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-04.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-05.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-06.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-07.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html [ Skip ]
-webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-two-dimensional.html [ Failure ]
-webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline.html [ Failure ]
-webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191367 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html [ ImageOnlyFailure ]
@@ -631,6 +587,7 @@ 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/191627 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html [ Failure ]
 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 ]
index 1e86877..5dc5f70 100644 (file)
@@ -6,7 +6,6 @@ ahem
 
 
 
-baseline1 and baseline2 should have the same baseline.baseline4 and baseline5 should be below baseline6.
 
 PASS .grid 1 
 PASS .grid 2 
index 158583e..3856b6f 100644 (file)
@@ -14,8 +14,6 @@ ahem
 
 
 
-baseline1 and baseline2 should have the same baseline.
-baseline4 and baseline5 should be below baseline6.
 
 PASS .grid 1 
 PASS .grid 2 
index a7bd530..e81733a 100644 (file)
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 <style>
 body {
     margin: 0;
@@ -202,3 +203,4 @@ document.getElementById("flexbox-with-scrollbar").style.width = "auto";
 </script>
 
 </body>
+</html>
index 0b1e557..ed801bd 100644 (file)
 .border { border: 11px solid pink; }
 .padding { padding: 13px; }
 .margin { margin: 8px 0; }
-.border-padding-margin {
-   border: 5px solid pink;
-   padding: 7px;
-   margin: 3px 0;
-}
 .flexbox > div {
     min-width: 0;
     min-height: 0;
 }
 </style>
+<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
 <div>
 before text
 <div class="border" style="display: inline-block; background-color: lightgrey">
@@ -76,8 +72,8 @@ the grey box.
 
 <div>
 Should align with the top
-<div class="inline-block border-padding-margin" style="background-color: pink;">
-  <div class="flexbox border-padding-margin" style="width: 100px; height: 100px; background-color: pink">
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
       <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
   </div>
 </div>
index 8216dcf..e84c18c 100644 (file)
@@ -9,12 +9,8 @@
 .border { border: 11px solid pink; }
 .padding { padding: 13px; }
 .margin { margin: 8px 0; }
-.border-padding-margin {
-   border: 5px solid pink;
-   padding: 7px;
-   margin: 3px 0;
-}
 </style>
+<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
 <div>
 before text
 <div class="border" style="display: inline-block; background-color: lightgrey">
@@ -64,8 +60,8 @@ the grey box.
 
 <div>
 Should align with the top
-<div class="inline-block border-padding-margin" style="background-color: pink">
-  <div class="grid border border-padding-margin" style="width: 100px; height: 100px; background-color: pink">
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
       <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
   </div>
 </div>
index d96885f..b69d06b 100644 (file)
@@ -1,3 +1,22 @@
+
+PASS .grid, container 1 
+PASS .grid, container 2 
+PASS .grid, container 3 
+PASS .grid, container 4 
+PASS .grid, container 5 
+PASS .grid, container 6 
+PASS .grid, container 7 
+PASS .grid, container 8 
+PASS .grid, container 9 
+PASS .grid, container 10 
+PASS .grid, container 11 
+PASS .grid, container 12 
+PASS .grid, container 13 
+PASS .grid, container 14 
+PASS .grid, container 15 
+PASS .grid, container 16 
+PASS .grid, container 17 
+PASS .grid, container 18 
 The test shows 3 grids each of them with 3 items sorted differently in the DOM.
 Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
 
@@ -5,41 +24,24 @@ This case shows 3 items located along the first row and in different columns, so
 
  
  
- PASS
-PASS
-PASS
 This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
 
  
  
- PASS
-PASS
-PASS
 This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
 
  
  
- PASS
-PASS
-PASS
 This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
 
  
  
- PASS
-PASS
-PASS
 This case shows one of the grids with no items, hence its baseline must be synthesized.
 
  
  
-PASS
-PASS
-PASS
 This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
 
  
  
- PASS
-PASS
-PASS
+
index f31a2a2..6e4d656 100644 (file)
@@ -57,7 +57,9 @@ body { margin: 0; }
    background-color: green;
 }
 </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, container')">
 <div id="log"></div>
 <p>
index f46f387..451a1b3 100644 (file)
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 <style>
 body {
     margin: 0;
@@ -93,7 +94,7 @@ of the grey box
 <!-- If there are no griditems, align to the bottom of the box. -->
 <div>
 should align with the bottom
-<div class="empty inline-grid" style="width: 30px; height: 30px">
+<div class="inline-grid" style="width: 30px; height: 30px">
 </div>
 of the grey box
 </div>
@@ -208,3 +209,4 @@ document.getElementById("grid-with-scrollbar").style.width = "auto";
 </script>
 
 </body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt
new file mode 100644 (file)
index 0000000..001c861
--- /dev/null
@@ -0,0 +1,3 @@
+
+PASS This test should not crash in debug. 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html
new file mode 100644 (file)
index 0000000..76b6396
--- /dev/null
@@ -0,0 +1,19 @@
+<!doctype html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+.grid {
+  display: grid;
+  grid-template-columns: 10px;
+  grid-template-rows: minmax(4px, 1fr);
+  align-items: baseline;
+  width: 100px;
+}
+</style>
+<div class="grid">
+    <div style="writing-mode: vertical-rl;"></div>
+</div>
+<script>
+    test(() => {
+    }, "This test should not crash in debug.");
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..d19e12b
--- /dev/null
@@ -0,0 +1,8 @@
+
+PASS No crash or assertion failure. 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html
new file mode 100644 (file)
index 0000000..f7732ee
--- /dev/null
@@ -0,0 +1,26 @@
+<!doctype html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<div id="grid" style="display: inline-grid; grid-template-columns: 2fr;">
+    <div id="item" style="justify-self: baseline;"></div>
+</div>
+<br>
+<div id="grid" style="display: inline-grid; grid-template-columns: minmax(100px, 4fr);">
+    <div id="item" style="justify-self: baseline;"></div>
+</div>
+<div id="grid" style="display: inline-grid; grid-template-columns: minmax(100px, 4fr);">
+    <div style="width: 100%; justify-self: baseline;"></div>
+</div>
+<div id="grid" style="display: inline-grid; grid-template-rows: 2fr;">
+    <div style="align-self: baseline;"></div>
+</div>
+<div id="grid" style="display: inline-grid; grid-template-rows: minmax(10px, 2fr);">
+    <div style="align-self: baseline;"></div>
+</div>
+<div id="grid" style="display: inline-grid; grid-template-rows: minmax(10px, 2fr);">
+    <div style="height: 100%; align-self: baseline;"></div>
+</div>
+<script>
+    test(() => {}, "No crash or assertion failure.");
+</script>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..d779069
--- /dev/null
@@ -0,0 +1,3 @@
+This test should not crash
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html
new file mode 100644 (file)
index 0000000..78aea1c
--- /dev/null
@@ -0,0 +1,14 @@
+<!doctype html>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<p>This test should not crash</p>
+<div style="display: grid;">
+    <div id="item" style="align-self: baseline;">PASS</div>
+</div>
+<script>
+    let item = document.getElementById("item");
+    item.offsetLeft;
+    item.style.width = "20px";
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt
new file mode 100644 (file)
index 0000000..75b61ad
--- /dev/null
@@ -0,0 +1,7 @@
+This test should not crash
+
+PASS
+
+PASS
+PASS
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html
new file mode 100644 (file)
index 0000000..a677130
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<p>This test should not crash</p>
+<div style="display: grid;">
+    <span style="height: 54%; align-self: baseline;" >PASS</span>
+</div>
+
+<br>
+
+<div style="display: inline-grid;">
+    <span>PASS</span>
+    <div style="display: inline-grid; height: 54%; align-self: baseline;" ><span>PASS</span></div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt
new file mode 100644 (file)
index 0000000..4e6f637
--- /dev/null
@@ -0,0 +1,4 @@
+This test should not crash
+
+PASS
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html
new file mode 100644 (file)
index 0000000..66fe9d2
--- /dev/null
@@ -0,0 +1,7 @@
+<!doctype html>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<p>This test should not crash</p>
+<div style="display: grid; grid-template-columns: 41%; justify-items: baseline">PASS<div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..8cf55a8
--- /dev/null
@@ -0,0 +1,5 @@
+
+PASS No crash or assertion failure when changing align-self from 'auto' to 'baseline'. 
+PASS No crash or assertion failure when changing align-self from 'baseline' to 'start'. 
+PASS No crash or assertion failure when item's writing-mode changes from orthogonal to parallel. 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html
new file mode 100644 (file)
index 0000000..ed6c9ad
--- /dev/null
@@ -0,0 +1,32 @@
+<!doctype html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<div style="display: grid;">
+    <div id="item1"></div>
+</div>
+<div style="display: grid;">
+    <div id="item2" style="align-self: baseline"></div>
+</div>
+<div style="display: grid;">
+    <div id="item3" style="writing-mode: vertical-lr;"></div>
+</div>
+<script>
+    test(() => {
+       document.body.offsetLeft;
+       var item = document.getElementById("item1");
+       item.style.alignSelf = "baseline";
+       assert_equals(item.style.alignSelf, "baseline");
+    }, "No crash or assertion failure when changing align-self from 'auto' to 'baseline'.");
+    test(() => {
+       document.body.offsetLeft;
+       var item = document.getElementById("item2");
+       item.style.alignSelf = "start";
+       assert_equals(item.style.alignSelf, "start");
+    }, "No crash or assertion failure when changing align-self from 'baseline' to 'start'.");
+    test(() => {
+       document.body.offsetLeft;
+       var item = document.getElementById("item3");
+       item.style.writingMode = "horizontal-tb";
+       assert_equals(item.style.writingMode, "horizontal-tb");
+    }, "No crash or assertion failure when item's writing-mode changes from orthogonal to parallel.");
+</script>
index 5f1c94e..ad1173d 100644 (file)
@@ -23,10 +23,10 @@ body { margin: 0; }
 }
 .extraRightPadding { padding-right: 30px; }
 .extraLeftPadding { padding-left: 30px; }
-.item { display: inline; }
+.item { float: left; clear: both; }
 .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>
+<div class="block"><div class="item left">A</div><div class="item left">A</div><div class="item left">A</div><div class="item left">A</div></div>
+<div class="block"><div class="item extraRightPadding left">A</div><div class="item left">A</div><div class="item extraLeftPadding left">A</div><div class="item left">A</div></div>
index 0d1b155..e56c50a 100644 (file)
@@ -11,7 +11,6 @@ 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
index 9ef2116..cfddb24 100644 (file)
@@ -7,6 +7,7 @@ body { margin: 0; }
 .grid {
    margin: 5px;
    font-family: Ahem;
+   -webkit-text-orientation: sideways;
 }
 .font12 { font-size:24px; }
 .font16 { font-size:32px; }
@@ -46,10 +47,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="25" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="133" data-offset-y="11">A</span><span class="firstRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="235" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="343" data-offset-y="10">A</span>
+        <span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="24" data-offset-y="111">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="133" data-offset-y="124">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="262" data-offset-y="111">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="343" 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="133" data-offset-y="243">A</span><span class="thirdRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="257" data-offset-y="212">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="343" data-offset-y="212">A</span>
+        <span class="fourthRowFirstColumn verticalLR font24 extraRightPadding" data-offset-x="20" data-offset-y="320">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraBottomPadding" data-offset-x="133" data-offset-y="320">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="261" data-offset-y="320">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="343" data-offset-y="352">A</span>
     </div>
 </div>
 
@@ -57,10 +58,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="133" 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="348" 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="136" data-offset-y="111">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="235" data-offset-y="118">A</span><span class="secondRowFourthColumn verticalLR font32 extraBottomPadding" data-offset-x="348" data-offset-y="111">A</span>
+        <span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="31" data-offset-y="235">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="133" data-offset-y="242">A</span><span class="thirdRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="235" data-offset-y="235">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="348" 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="133" data-offset-y="359">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="235" data-offset-y="371">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="356" data-offset-y="359">A</span>
     </div>
 </div>
 
@@ -79,10 +80,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="22" 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="120" 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="224" 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="327" data-offset-y="235">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="323" data-offset-y="375">A</span>
     </div>
 </div>
 
@@ -90,10 +91,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12 extraBottomPadding" data-offset-x="22" 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="122" 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="224" 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="331" data-offset-y="351">A</span>
     </div>
 </div>
 
@@ -112,10 +113,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="371" 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="254" 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="122" 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="37" data-offset-y="246">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="57" data-offset-y="387">A</span>
     </div>
 </div>
 
@@ -123,10 +124,10 @@ span {
 
 <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>
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="344" 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="224" 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="122" 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="25" data-offset-y="307">A</span>
     </div>
 </div>
 
@@ -145,10 +146,10 @@ span {
 
 <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>
+        <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="197" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="299" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="433" data-offset-y="10">A<br>A</span>
+        <span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="38" data-offset-y="175">A<br>A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="197" data-offset-y="188">A<br>A</span><span class="secondRowThirdColumn verticalLR font12 extraTopPadding" data-offset-x="304" data-offset-y="175">A<br>A</span><span class="secondRowFourthColumn horizontalTB font32 extraLeftPadding" data-offset-x="433" data-offset-y="175">A<br>A</span>
+        <span class="thirdRowFirstColumn verticalLR font32" data-offset-x="31" data-offset-y="340">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="197" data-offset-y="340">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="299" data-offset-y="340">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="433" data-offset-y="357">A<br>A</span>
+        <span class="fourthRowFirstColumn verticalLR font24" data-offset-x="34" data-offset-y="458">A<br>A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="197" data-offset-y="458">A<br>A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="303" data-offset-y="458">A<br>A</span><span class="fourthRowFourthColumn horizontalTB font12 extraTopPadding" data-offset-x="433" data-offset-y="466">A<br>A</span>
     </div>
 </div>
 
@@ -156,10 +157,10 @@ span {
 
 <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="firstRowFirstColumn verticalLR font12 extraTopPadding" data-offset-x="25" 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="186" 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>
+        <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="513" data-offset-y="418">A<br>A</span>
     </div>
 </div>
 
index 41c68f1..2a1ed86 100644 (file)
@@ -8,7 +8,7 @@ body { margin: 0; }
    float: left;
    margin: 5px;
    text-orientation: sideways;
-   width: 350px;
+   width: 360px;
    height: 100px;
 }
 .block > :nth-child(1) { font-size:24px; }
index 8e22866..4881b13 100644 (file)
@@ -8,7 +8,7 @@ body { margin: 0; }
    float: left;
    margin: 5px;
    text-orientation: sideways;
-   width: 350px;
+   width: 360px;
    height: 100px;
 }
 .block > :nth-child(1) { font-size:24px; }
index 81f185d..02a029b 100644 (file)
@@ -8,7 +8,7 @@ body { margin: 0; }
    float: left;
    margin: 5px;
    text-orientation: sideways;
-   width: 350px;
+   width: 360px;
    height: 100px;
 }
 .block > :nth-child(1) { font-size:24px; }
index 7891a3d..d477345 100644 (file)
@@ -8,7 +8,7 @@ body { margin: 0; }
    float: left;
    margin: 5px;
    text-orientation: sideways;
-   width: 350px;
+   width: 360px;
    height: 100px;
 }
 .block > :nth-child(1) { font-size:24px; }
index 28bc847..7705daf 100644 (file)
@@ -1,3 +1,45 @@
+2018-11-23  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Implement Baseline Alignment for grid items
+        https://bugs.webkit.org/show_bug.cgi?id=145566
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Updated test expectations of severla tests, that are now passing with the new code.
+
+        * resources/import-expectations.json:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-001-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-002-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-005-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-006-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-007-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-008-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003-expected.txt:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html:
+        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-002-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-002-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002-expected.txt:
+        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002-expected.txt:
+
 2018-11-20  Manuel Rego Casasnovas  <rego@igalia.com>
 
         [css-grid] Consider scrollbars in populateGridPositionsForDirection()
index e8365a7..117df39 100644 (file)
@@ -1,9 +1,5 @@
 
-FAIL .before 1 assert_equals: 
-<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100" class=" before" data-offset-y="20"></div>
-offsetTop expected 20 but got 0
+PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="30"></div>
-offsetTop expected 30 but got 0
+PASS .before 3 
 
index 159932e..117df39 100644 (file)
@@ -1,7 +1,5 @@
 
 PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="10"></div>
-offsetTop expected 10 but got 0
+PASS .before 3 
 
index 5125e67..117df39 100644 (file)
@@ -1,9 +1,5 @@
 
-FAIL .before 1 assert_equals: 
-<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100" class=" before" data-offset-x="20"></div>
-offsetLeft expected 20 but got 0
+PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="30"></div>
-offsetLeft expected 30 but got 0
+PASS .before 3 
 
index d8afadd..117df39 100644 (file)
@@ -1,7 +1,5 @@
 
 PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="10"></div>
-offsetLeft expected 10 but got 0
+PASS .before 3 
 
index b142174..af36c68 100644 (file)
@@ -2,11 +2,7 @@
 É
 É
 
-FAIL .before 1 assert_equals: 
-<div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100" class=" before" data-offset-y="8">É</div>
-offsetTop expected 8 but got 0
+PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="16">É</div>
-offsetTop expected 16 but got 0
+PASS .before 3 
 
index 0f22c62..af36c68 100644 (file)
@@ -4,7 +4,5 @@
 
 PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="8">É</div>
-offsetTop expected 8 but got 0
+PASS .before 3 
 
index 4d808c4..af36c68 100644 (file)
@@ -2,11 +2,7 @@
 É
 É
 
-FAIL .before 1 assert_equals: 
-<div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100" class=" before" data-offset-x="2">É</div>
-offsetLeft expected 2 but got 0
+PASS .before 1 
 PASS .before 2 
-FAIL .before 3 assert_equals: 
-<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="4">É</div>
-offsetLeft expected 4 but got 0
+PASS .before 3 
 
index 0fdb0f3..56f14b6 100644 (file)
@@ -6,5 +6,5 @@ PASS .before 1
 PASS .before 2 
 FAIL .before 3 assert_equals: 
 <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="5">É</div>
-offsetLeft expected 5 but got 0
+offsetLeft expected 5 but got 2
 
index ba920ce..9c7b9c2 100644 (file)
@@ -11,32 +11,8 @@ VerticalRL grid and Horizontal item
 ÉÉ É ÉÉÉ É ÉÉ É
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid alignItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 40 but got 175
-FAIL .grid 2 assert_equals: 
-<div class="grid alignItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 35 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 alignItemsBaseline">
-  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 height25"></div>
-</div>
-offsetTop expected 160 but got 0
-FAIL .grid 4 assert_equals: 
-<div class="grid width300 alignItemsBaseline">
-  <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 height25"></div>
-</div>
-offsetTop expected 160 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
 
index bc8c14d..11d88d3 100644 (file)
@@ -5,25 +5,7 @@ VerticalLR grid and item with fixed width
 VerticalRL grid and item with fixed width
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid alignItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="175" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 115 but got 180
-FAIL .grid 2 assert_equals: 
-<div class="grid alignItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 30 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 alignItemsBaseline">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 height25"></div>
-</div>
-offsetTop expected 85 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
 
index aa0ceb5..17e84b6 100644 (file)
@@ -5,25 +5,7 @@ VerticalLR grid and item with relative width
 VerticalRL grid and item with rlative width
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid alignItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn relativeWidth" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 140 but got 180
-FAIL .grid 2 assert_equals: 
-<div class="grid alignItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 30 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 alignItemsBaseline">
-  <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 height25"></div>
-</div>
-offsetTop expected 60 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
 
index 610f2f9..11d88d3 100644 (file)
@@ -5,25 +5,7 @@ VerticalLR grid and item with fixed width
 VerticalRL grid and item with fixed width
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid alignItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="85" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 85 but got 25
-FAIL .grid 2 assert_equals: 
-<div class="grid alignItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 width25"></div>
-</div>
-offsetLeft expected 30 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 alignItemsBaseline">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowAutoColumnSpanning2 height25"></div>
-</div>
-offsetTop expected 85 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
 
index b4276fa..6538a88 100644 (file)
@@ -11,32 +11,8 @@ VerticalLR grid and Horizontal item
 ÉÉ É ÉÉÉ É ÉÉ É
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid justifyItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 160 but got 0
-FAIL .grid 2 assert_equals: 
-<div class="grid justifyItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 160 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 35 but got 0
-FAIL .grid 4 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 60 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
 
index e4d3396..d91a668 100644 (file)
@@ -7,32 +7,8 @@ VerticalLR grid and item with fixed height
 VerticalRL grid and item with fixed width
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid justifyItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 85 but got 0
-FAIL .grid 2 assert_equals: 
-<div class="grid justifyItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 85 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 60 but got 0
-FAIL .grid 4 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 30 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
 
index f672034..26d953a 100644 (file)
@@ -7,32 +7,8 @@ VerticalLR grid and item with relative height
 VerticalRL grid and item with relative height
 É É ÉÉ
 
-FAIL .grid 1 assert_equals: 
-<div class="grid justifyItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 60 but got 0
-FAIL .grid 2 assert_equals: 
-<div class="grid justifyItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 60 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 60 but got 0
-FAIL .grid 4 assert_equals: 
-<div class="grid width300 justifyItemsBaseline">
-  <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-offsetLeft expected 30 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
 
index 58a6385..108401b 100644 (file)
@@ -7,32 +7,8 @@ Horizontal grid and verticalLR item with relative width
  VerticalRL grid and item with fixed height
 É É ÉÉ
 
-FAIL .inline-grid 1 assert_equals: 
-<div class="inline-grid justifyItemsBaseline verticalRL">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 85 but got 0
-FAIL .inline-grid 2 assert_equals: 
-<div class="inline-grid justifyItemsBaseline verticalLR">
-  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
-  <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn height25"></div>
-</div>
-offsetTop expected 85 but got 0
-FAIL .inline-grid 3 assert_equals: 
-<div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-width expected 210 but got 150
-FAIL .inline-grid 4 assert_equals: 
-<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
-  <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
-  <div class="autoRowSpanning2AutoColumn width25"></div>
-</div>
-width expected 180 but got 150
+PASS .inline-grid 1 
+PASS .inline-grid 2 
+PASS .inline-grid 3 
+PASS .inline-grid 4 
 
index a9f6473..247954d 100644 (file)
@@ -18,48 +18,12 @@ auto-sized rows - items with relative height
  flex max-function columns - items with relative width
 baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.
 
-FAIL .inline-grid 1 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
-        <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-offsetLeft expected -50 but got 0
-FAIL .inline-grid 2 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows flex-columns">
-        <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-width expected 100 but got 300
-FAIL .inline-grid 3 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
-        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-width expected 160 but got 420
-FAIL .inline-grid 4 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows max-content-columns">
-        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-width expected 160 but got 420
-FAIL .inline-grid 5 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows min-content-columns">
-        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-width expected 160 but got 420
-FAIL .inline-grid 6 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows">
-        <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
-        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
-        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-    </div>
-width expected 100 but got 300
+PASS .inline-grid 1 
+PASS .inline-grid 2 
+PASS .inline-grid 3 
+PASS .inline-grid 4 
+PASS .inline-grid 5 
+PASS .inline-grid 6 
 PASS .inline-grid 7 
 PASS .inline-grid 8 
 PASS .inline-grid 9 
index 1be6669..9685afc 100644 (file)
@@ -75,49 +75,25 @@ baseline is not applied initially, but orthogonal items force repeating the trac
 É
 ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É
 
-FAIL .inline-grid 1 assert_equals: 
-<div class="inline-grid verticalRL alignItemsBaseline columns max-flex-rows">
-  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
-  <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-  <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-</div>
-offsetLeft expected -10 but got 366
+PASS .inline-grid 1 
 PASS .inline-grid 2 
 PASS .inline-grid 3 
 PASS .inline-grid 4 
 PASS .inline-grid 5 
 PASS .inline-grid 6 
-FAIL .inline-grid 7 assert_equals: 
-<div class="inline-grid verticalLR alignItemsBaseline columns max-flex-rows">
-  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
-  <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-  <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-</div>
-offsetLeft expected 35 but got 0
+PASS .inline-grid 7 
 PASS .inline-grid 8 
 PASS .inline-grid 9 
 PASS .inline-grid 10 
 PASS .inline-grid 11 
 PASS .inline-grid 12 
-FAIL .inline-grid 13 assert_equals: 
-<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
-  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
-  <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-  <div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
-</div>
-offsetLeft expected 35 but got 0
+PASS .inline-grid 13 
 PASS .inline-grid 14 
 PASS .inline-grid 15 
 PASS .inline-grid 16 
 PASS .inline-grid 17 
 PASS .inline-grid 18 
-FAIL .inline-grid 19 assert_equals: 
-<div class="inline-grid alignItemsBaseline columns max-flex-rows">
-  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="376" data-expected-width="100" data-expected-height="75">É</div>
-  <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
-  <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
-</div>
-offsetTop expected 376 but got 0
+PASS .inline-grid 19 
 PASS .inline-grid 20 
 PASS .inline-grid 21 
 PASS .inline-grid 22 
index 507c59f..2fa0f85 100644 (file)
@@ -19,46 +19,10 @@ flex rows - column-axis baseline - the blue orthogonal item didn't participate i
 É
 É
 
-FAIL .grid 1 assert_equals: 
-<div class="grid column justifyItemsBaseline">
-  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
-  <div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
-  <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
-</div>
-offsetLeft expected 16 but got 0
-FAIL .grid 2 assert_equals: 
-<div class="grid column justifyItemsBaseline">
-  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
-  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
-  <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
-</div>
-offsetLeft expected 16 but got 0
-FAIL .grid 3 assert_equals: 
-<div class="grid column justifyItemsBaseline">
-  <div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="50">É</div>
-  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
-  <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
-</div>
-offsetLeft expected 16 but got 0
-FAIL .grid 4 assert_equals: 
-<div class="grid row alignItemsBaseline">
-  <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="24" data-expected-width="50" data-expected-height="40"></div>
-  <div class="item2 verticalLR" data-offset-x="50" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
-  <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
-</div>
-offsetTop expected 24 but got 0
-FAIL .grid 5 assert_equals: 
-<div class="grid row alignItemsBaseline ">
-  <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
-  <div class="item3 verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
-</div>
-offsetTop expected 40 but got 0
-FAIL .grid 6 assert_equals: 
-<div class="grid row alignItemsBaseline">
-  <div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="50" data-expected-height="30">É</div>
-  <div class="item2" data-offset-x="50" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
-  <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
-</div>
-offsetTop expected 34 but got 0
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+PASS .grid 6 
 
index 48956dd..1a16a1f 100644 (file)
@@ -28,7 +28,8 @@
   color: green;
   grid-auto-columns: 50px;
   align-items: baseline;
-  align-content: space-evenly;
+  align-content: space-between;
+  -webkit-text-orientation: sideways;
 }
 .firstRowFirstColumn {
   grid-row: 1;
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div>
-  <div style="top: 73px; left: 0px;">XX X</div>
-  <div style="top: 17px; left: 50px" class="big">X</div>
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 70px; left: 0px;">XX X</div>
+  <div style="top: 80px; left: 0px;">X XX</div>
+  <div style="top: 90px; left: 0px;">X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
 </div>
 <div class="grid">
   <div class="firstRowFirstColumn">XX XXXX XX</div>
   <div class="firstRowSecondColumn big">X</div>
-  <div class="secondRowFirstColumn">XX X</div>
+  <div class="secondRowFirstColumn">XX X X XX X</div>
 </div>
index 6fcd356..7494800 100644 (file)
@@ -13,9 +13,9 @@
 .block {
   position: absolute;
   z-index: -1;
-  background: green;
   width: 100px;
   height: 100px;
+  background: green;
 }
 .block > div {
   position: absolute;
@@ -29,6 +29,7 @@
   grid-auto-rows: 50px;
   justify-items: baseline;
   justify-content: start;
+  -webkit-text-orientation: sideways;
 }
 .grid > div { writing-mode: vertical-lr; }
 .firstRowFirstColumn {
@@ -46,9 +47,9 @@
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
-  <div style="top: 20px; left: 15px;">X</div>
-  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 0px; left: 2px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 12px;">X</div>
+  <div style="top: 30px; left: 12px;">X X</div>
   <div style="top: 50px; left: 0px" class="big">X</div>
 </div>
 <div class="grid">
index 9aee9b3..d1f714d 100644 (file)
   color: green;
   grid-auto-rows: 50px;
   justify-items: baseline;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  -webkit-text-orientation: sideways;
 }
 .grid > div { writing-mode: vertical-lr; }
+.block > div { writing-mode: vertical-lr; }
 .firstRowFirstColumn {
   grid-row: 1;
   grid-column: 1;
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 23px;">XXX<br>XXX</div>
-  <div style="top: 0px; left: 72px;">X</div>
-  <div style="top: 10px; left: 72px;">X</div>
-  <div style="top: 20px; left: 33px;">X</div>
-  <div style="top: 30px; left: 33px;">X</div>
-  <div style="top: 30px; left: 72px;">X</div>
-  <div style="top: 50px; left: 18px" class="big">X</div>
+  <div style="top: 0px; left: 2px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 0px; left: 70px;">XX X</div>
+  <div style="top: 0px; left: 80px;">X XX</div>
+  <div style="top: 0px; left: 90px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
 </div>
 <div class="grid">
   <div class="firstRowFirstColumn">XX XXXX XX</div>
   <div class="secondRowFirstColumn big">X</div>
-  <div class="firstRowSecondColumn">XX X</div>
+  <div class="firstRowSecondColumn">XX X X XX X</div>
 </div>
index 155a20c..b8fcd07 100644 (file)
@@ -29,6 +29,7 @@
   grid-auto-rows: 50px;
   justify-items: baseline;
   justify-content: start;
+  -webkit-text-orientation: sideways;
 }
 .grid > div { writing-mode: vertical-lr; }
 .firstRowFirstColumn {
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
-  <div style="top: 0px; left: 50px;">X</div>
-  <div style="top: 10px; left: 50px;">X</div>
-  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 0px; left: 4px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 44px;">X</div>
+  <div style="top: 10px; left: 44px;">X</div>
+  <div style="top: 30px; left: 44px;">X</div>
   <div style="top: 50px; left: 0px" class="big">X</div>
 </div>
 <div class="grid">
index 6333bf3..d9f8526 100644 (file)
@@ -27,6 +27,7 @@
   grid-auto-rows: 50px;
   justify-items: baseline;
   justify-content: start;
+  text-orientation: sideways;
 }
 .grid > div { writing-mode: vertical-lr; }
 .big { font-size: 20px; }
@@ -45,9 +46,9 @@
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
-  <div style="top: 20px; left: 15px;">X</div>
-  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 0px; left: 2px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 12px;">X</div>
+  <div style="top: 30px; left: 12px;">X X</div>
   <div style="top: 50px; left: 0px" class="big">X</div>
 </div>
 <div class="grid">
index 4f54208..04a2826 100644 (file)
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
-  <div style="top: 0px; left: 55px;">X</div>
-  <div style="top: 10px; left: 55px;">X</div>
-  <div style="top: 20px; left: 15px;">X</div>
-  <div style="top: 30px; left: 15px;">X</div>
-  <div style="top: 30px; left: 55px;">X</div>
+  <div style="top: 0px; left: 2px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 52px;">X</div>
+  <div style="top: 10px; left: 52px;">X</div>
+  <div style="top: 20px; left: 12px;">X</div>
+  <div style="top: 30px; left: 12px;">X</div>
+  <div style="top: 30px; left: 52px;">X</div>
   <div style="top: 50px; left: 0px" class="big">X</div>
 </div>
 <div class="grid">
index db7d45e..e2d3283 100644 (file)
@@ -27,6 +27,7 @@
   grid-auto-rows: 50px;
   justify-items: baseline;
   justify-content: start;
+  -webkit-text-orientation: sideways;
 }
 .grid > div { writing-mode: vertical-lr; }
 .firstRowFirstColumn {
 </style>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div class="block">
-  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
-  <div style="top: 0px; left: 50px;">X</div>
-  <div style="top: 10px; left: 50px;">X</div>
-  <div style="top: 30px; left: 50px;">X</div>
-  <div style="top: 50px; left: 0px;">X</div>
+  <div style="top: 0px; left: 4px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 44px;">X</div>
+  <div style="top: 10px; left: 44px;">X</div>
+  <div style="top: 30px; left: 44px;">X</div>
+  <div style="top: 50px; left: 0px;" class="big">X</div>
 </div>
 <div class="grid">
   <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
index bb5703a..0bf90d9 100644 (file)
@@ -1,32 +1,12 @@
 
 PASS .grid 1 
 PASS .grid 2 
-FAIL .grid 3 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
-</div>
-offsetLeft expected 440 but got 365
-FAIL .grid 4 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
-</div>
-margin-left expected "50" but got "125"
+PASS .grid 3 
+PASS .grid 4 
 PASS .grid 5 
 PASS .grid 6 
-FAIL .grid 7 assert_equals: 
-<div class="grid">
-  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
-</div>
-margin-right expected "50" but got "125"
-FAIL .grid 8 assert_equals: 
-<div class="grid">
-  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
-</div>
-offsetLeft expected 50 but got 125
+PASS .grid 7 
+PASS .grid 8 
 Direction LTR
 
 Item margin-left: 50%;
index ca75e12..0bf90d9 100644 (file)
@@ -1,30 +1,10 @@
 
-FAIL .grid 1 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
-</div>
-offsetTop expected 440 but got 365
-FAIL .grid 2 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
-</div>
-margin-top expected "50" but got "125"
+PASS .grid 1 
+PASS .grid 2 
 PASS .grid 3 
 PASS .grid 4 
-FAIL .grid 5 assert_equals: 
-<div class="grid">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
-</div>
-margin-bottom expected "50" but got "125"
-FAIL .grid 6 assert_equals: 
-<div class="grid">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
-</div>
-offsetTop expected 50 but got 125
+PASS .grid 5 
+PASS .grid 6 
 PASS .grid 7 
 PASS .grid 8 
 Direction LTR
index d1d33d5..0bf90d9 100644 (file)
@@ -1,30 +1,10 @@
 
-FAIL .grid 1 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
-</div>
-margin-bottom expected "50" but got "125"
-FAIL .grid 2 assert_equals: 
-<div class="grid directionRTL">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
-</div>
-margin-top expected "50" but got "125"
+PASS .grid 1 
+PASS .grid 2 
 PASS .grid 3 
 PASS .grid 4 
-FAIL .grid 5 assert_equals: 
-<div class="grid">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
-</div>
-margin-bottom expected "50" but got "125"
-FAIL .grid 6 assert_equals: 
-<div class="grid">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
-  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
-</div>
-offsetTop expected 50 but got 125
+PASS .grid 5 
+PASS .grid 6 
 PASS .grid 7 
 PASS .grid 8 
 Direction LTR
index 586f1d5..9c1db91 100644 (file)
@@ -6,13 +6,13 @@ FAIL .grid 3 assert_equals:
   <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
   <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
 </div>
-width expected 60 but got 260
+width expected 60 but got 50
 FAIL .grid 4 assert_equals: 
 <div class="grid directionRTL">
   <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
   <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
 </div>
-width expected 60 but got 260
+width expected 60 but got 50
 PASS .grid 5 
 PASS .grid 6 
 FAIL .grid 7 assert_equals: 
@@ -20,13 +20,13 @@ FAIL .grid 7 assert_equals:
   <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
 </div>
-width expected 60 but got 260
+width expected 60 but got 50
 FAIL .grid 8 assert_equals: 
 <div class="grid">
   <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
 </div>
-width expected 60 but got 260
+width expected 60 but got 50
 Direction LTR
 
 Item padding-left: 50%;
index 6d4a617..3ae9608 100644 (file)
@@ -4,13 +4,13 @@ FAIL .grid 1 assert_equals:
   <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 FAIL .grid 2 assert_equals: 
 <div class="grid directionRTL">
   <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 PASS .grid 3 
 PASS .grid 4 
 FAIL .grid 5 assert_equals: 
@@ -18,13 +18,13 @@ FAIL .grid 5 assert_equals:
   <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 FAIL .grid 6 assert_equals: 
 <div class="grid">
   <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 PASS .grid 7 
 PASS .grid 8 
 Direction LTR
index 32142c2..73405c7 100644 (file)
@@ -4,13 +4,13 @@ FAIL .grid 1 assert_equals:
   <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 FAIL .grid 2 assert_equals: 
 <div class="grid directionRTL">
   <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 PASS .grid 3 
 PASS .grid 4 
 FAIL .grid 5 assert_equals: 
@@ -18,13 +18,13 @@ FAIL .grid 5 assert_equals:
   <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 FAIL .grid 6 assert_equals: 
 <div class="grid">
   <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
   <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
 </div>
-height expected 60 but got 260
+height expected 60 but got 50
 PASS .grid 7 
 PASS .grid 8 
 Direction LTR
index 088f7f9..4562997 100644 (file)
@@ -94,6 +94,17 @@ imported/w3c/web-platform-tests/css/css-ui/outline-020.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/selectors/selectors-empty-001.xml [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/service-workers/service-worker/fetch-canvas-tainting-cache.https.html [ Pass Failure ]
 
+# Baseline Alignment tests affected by 1px diff failures only on Mac and iOS platforms
+webkit.org/b/170293 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-two-dimensional.html [ Failure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-03.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-04.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-06.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-07.html [ ImageOnlyFailure ]
+
+
 # A sub-test in this test is extremely flaky and fails most of the time, messing up partial-failure expectations
 webkit.org/b/189686 webgl/2.0.0/conformance2/renderbuffers/multisampled-renderbuffer-initialization.html [ Skip ]
 webkit.org/b/189686 webgl/2.0.0/conformance/reading/read-pixels-test.html [ Slow ]
index 3c1af96..7453086 100644 (file)
@@ -589,6 +589,15 @@ webkit.org/b/112176 compositing/overflow/updating-scrolling-content.html [ Failu
 webkit.org/b/112176 fast/canvas/canvas-composite-alpha.html [ Failure Pass ]
 webkit.org/b/112176 fast/canvas/webgl/read-pixels-test.html [ Failure Pass ]
 
+# Baseline Alignment tests affected by 1px diff failures only on Mac and iOS platforms
+webkit.org/b/170293 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-03.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-04.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-06.html [ ImageOnlyFailure ]
+webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-07.html [ ImageOnlyFailure ]
+
 # The following ref-test appears to fail on EWS bots as well.
 webkit.org/b/112176 fast/css/sticky/inline-sticky-abspos-child.html [ ImageOnlyFailure Pass ]
 webkit.org/b/112176 fast/css/sticky/inline-sticky.html [ ImageOnlyFailure Pass ]
index 49cc123..ba5e44e 100644 (file)
@@ -1,3 +1,96 @@
+2018-11-23  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Implement Baseline Alignment for grid items
+        https://bugs.webkit.org/show_bug.cgi?id=145566
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        This patch impements the Baseline Self-Alignment feature for grid items according to
+        the CSS Box Alignment specification [1].
+
+        This new layout logic is handled by the Self-Alignment (justify-self and align-self)
+        and Default-Alignment (justify-items and align-items) CSS properties.
+
+        This feature allows users to align the grid items sharing a Baseline Alignment Context,
+        either row or column contexts, based on their respective baselines.
+
+        [1] https://drafts.csswg.org/css-align-3/#baseline-align-self
+
+        Tests: fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html
+               fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html
+               fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html
+               fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html
+               fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html
+               fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html
+
+        * Sources.txt:
+        * rendering/GridBaselineAlignment.cpp: Added.
+        (WebCore::GridBaselineAlignment::marginOverForChild const):
+        (WebCore::GridBaselineAlignment::marginUnderForChild const):
+        (WebCore::GridBaselineAlignment::logicalAscentForChild const):
+        (WebCore::GridBaselineAlignment::ascentForChild const):
+        (WebCore::GridBaselineAlignment::descentForChild const):
+        (WebCore::GridBaselineAlignment::isDescentBaselineForChild const):
+        (WebCore::GridBaselineAlignment::isHorizontalBaselineAxis const):
+        (WebCore::GridBaselineAlignment::isOrthogonalChildForBaseline const):
+        (WebCore::GridBaselineAlignment::isParallelToBaselineAxisForChild const):
+        (WebCore::GridBaselineAlignment::baselineGroupForChild const):
+        (WebCore::GridBaselineAlignment::updateBaselineAlignmentContext):
+        (WebCore::GridBaselineAlignment::baselineOffsetForChild const):
+        (WebCore::GridBaselineAlignment::clear):
+        (WebCore::BaselineGroup::BaselineGroup):
+        (WebCore::BaselineGroup::update):
+        (WebCore::BaselineGroup::isOppositeBlockFlow const):
+        (WebCore::BaselineGroup::isOrthogonalBlockFlow const):
+        (WebCore::BaselineGroup::isCompatible const):
+        (WebCore::BaselineContext::BaselineContext):
+        (WebCore::BaselineContext::sharedGroup const):
+        (WebCore::BaselineContext::updateSharedGroup):
+        (WebCore::BaselineContext::findCompatibleSharedGroup):
+        * rendering/GridBaselineAlignment.h: Added.
+        (WebCore::BaselineGroup::maxAscent const):
+        (WebCore::BaselineGroup::maxDescent const):
+        (WebCore::BaselineGroup::size const):
+        (WebCore::isBaselinePosition):
+        (WebCore::GridBaselineAlignment::setBlockFlow):
+        * rendering/GridLayoutFunctions.h:
+        * rendering/GridTrackSizingAlgorithm.cpp:
+        (WebCore::gridAxisForDirection):
+        (WebCore::gridDirectionForAxis):
+        (WebCore::GridTrackSizingAlgorithm::availableSpace const):
+        (WebCore::GridTrackSizingAlgorithm::isIntrinsicSizedGridArea const):
+        (WebCore::GridTrackSizingAlgorithmStrategy::logicalHeightForChild const):
+        (WebCore::GridTrackSizingAlgorithmStrategy::minContentForChild const):
+        (WebCore::GridTrackSizingAlgorithmStrategy::maxContentForChild const):
+        (WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
+        (WebCore::GridTrackSizingAlgorithm::canParticipateInBaselineAlignment const):
+        (WebCore::GridTrackSizingAlgorithm::participateInBaselineAlignment const):
+        (WebCore::GridTrackSizingAlgorithm::updateBaselineAlignmentContext):
+        (WebCore::GridTrackSizingAlgorithm::baselineOffsetForChild const):
+        (WebCore::GridTrackSizingAlgorithm::clearBaselineItemsCache):
+        (WebCore::GridTrackSizingAlgorithm::cacheBaselineAlignedItem):
+        (WebCore::GridTrackSizingAlgorithm::copyBaselineItemsCache):
+        (WebCore::GridTrackSizingAlgorithm::setup):
+        (WebCore::GridTrackSizingAlgorithm::computeBaselineAlignmentContext):
+        * rendering/GridTrackSizingAlgorithm.h:
+        * rendering/RenderBlockFlow.cpp:
+        (WebCore::RenderBlockFlow::firstLineBaseline const):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutBlock):
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
+        (WebCore::RenderGrid::placeItemsOnGrid const):
+        (WebCore::RenderGrid::performGridItemsPreLayout const):
+        (WebCore::synthesizedBaselineFromMarginBox):
+        (WebCore::RenderGrid::isBaselineAlignmentForChild const):
+        (WebCore::RenderGrid::baselinePosition const):
+        (WebCore::RenderGrid::firstLineBaseline const):
+        (WebCore::RenderGrid::inlineBlockBaseline const):
+        (WebCore::RenderGrid::columnAxisBaselineOffsetForChild const):
+        (WebCore::RenderGrid::rowAxisBaselineOffsetForChild const):
+        (WebCore::RenderGrid::columnAxisOffsetForChild const):
+        (WebCore::RenderGrid::rowAxisOffsetForChild const):
+        * rendering/RenderGrid.h:
+
 2018-11-22  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         Address post-review feedback after r238438
index e88e8ff..a0a303c 100644 (file)
@@ -1899,6 +1899,7 @@ rendering/FlexibleBoxAlgorithm.cpp
 rendering/FixedTableLayout.cpp
 rendering/FloatingObjects.cpp
 rendering/Grid.cpp
+rendering/GridBaselineAlignment.cpp
 rendering/GridLayoutFunctions.cpp
 rendering/GridTrackSizingAlgorithm.cpp
 rendering/HitTestLocation.cpp
diff --git a/Source/WebCore/rendering/GridBaselineAlignment.cpp b/Source/WebCore/rendering/GridBaselineAlignment.cpp
new file mode 100644 (file)
index 0000000..1dbb3a4
--- /dev/null
@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2018 Igalia S.L.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include "config.h"
+#include "GridBaselineAlignment.h"
+
+#include "RenderStyle.h"
+
+namespace WebCore {
+
+// This function gives the margin 'over' based on the baseline-axis, since in grid we can have 2-dimensional
+// alignment by baseline. In horizontal writing-mode, the row-axis is the horizontal axis. When we use this
+// axis to move the grid items so that they are baseline-aligned, we want their "horizontal" margin (right);
+// the same will happen when using the column-axis under vertical writing mode, we also want in this case the
+// 'right' margin.
+LayoutUnit GridBaselineAlignment::marginOverForChild(const RenderBox& child, GridAxis axis) const
+{
+    return isHorizontalBaselineAxis(axis) ? child.marginRight() : child.marginTop();
+}
+
+// This function gives the margin 'under' based on the baseline-axis, since in grid we can can 2-dimensional
+// alignment by baseline. In horizontal writing-mode, the row-axis is the horizontal axis. When we use this
+// axis to move the grid items so that they are baseline-aligned, we want their "horizontal" margin (left);
+// the same will happen when using the column-axis under vertical writing mode, we also want in this case the
+// 'left' margin.
+LayoutUnit GridBaselineAlignment::marginUnderForChild(const RenderBox& child, GridAxis axis) const
+{
+    return isHorizontalBaselineAxis(axis) ? child.marginLeft() : child.marginBottom();
+}
+
+LayoutUnit GridBaselineAlignment::logicalAscentForChild(const RenderBox& child, GridAxis baselineAxis) const
+{
+    LayoutUnit ascent = ascentForChild(child, baselineAxis);
+    return isDescentBaselineForChild(child, baselineAxis) ? descentForChild(child, ascent, baselineAxis) : ascent;
+}
+
+LayoutUnit GridBaselineAlignment::ascentForChild(const RenderBox& child, GridAxis baselineAxis) const
+{
+    LayoutUnit margin = isDescentBaselineForChild(child, baselineAxis) ? marginUnderForChild(child, baselineAxis) : marginOverForChild(child, baselineAxis);
+    LayoutUnit baseline(isParallelToBaselineAxisForChild(child, baselineAxis) ? child.firstLineBaseline().value_or(-1) : -1);
+    // We take border-box's under edge if no valid baseline.
+    if (baseline == -1) {
+        if (isHorizontalBaselineAxis(baselineAxis))
+            return isFlippedWritingMode(m_blockFlow) ? child.size().width().toInt() + margin : margin;
+        return child.size().height() + margin;
+    }
+    return baseline + margin;
+}
+
+LayoutUnit GridBaselineAlignment::descentForChild(const RenderBox& child, LayoutUnit ascent, GridAxis baselineAxis) const
+{
+    if (isParallelToBaselineAxisForChild(child, baselineAxis))
+        return child.marginLogicalHeight() + child.logicalHeight() - ascent;
+    return child.marginLogicalWidth() + child.logicalWidth() - ascent;
+}
+
+bool GridBaselineAlignment::isDescentBaselineForChild(const RenderBox& child, GridAxis baselineAxis) const
+{
+    return isHorizontalBaselineAxis(baselineAxis)
+        && ((child.style().isFlippedBlocksWritingMode() && !isFlippedWritingMode(m_blockFlow))
+            || (child.style().isFlippedLinesWritingMode() && isFlippedWritingMode(m_blockFlow)));
+}
+
+bool GridBaselineAlignment::isHorizontalBaselineAxis(GridAxis axis) const
+{
+    return axis == GridRowAxis ? isHorizontalWritingMode(m_blockFlow) : !isHorizontalWritingMode(m_blockFlow);
+}
+
+bool GridBaselineAlignment::isOrthogonalChildForBaseline(const RenderBox& child) const
+{
+    return isHorizontalWritingMode(m_blockFlow) != child.isHorizontalWritingMode();
+}
+
+bool GridBaselineAlignment::isParallelToBaselineAxisForChild(const RenderBox& child, GridAxis axis) const
+{
+    return axis == GridColumnAxis ? !isOrthogonalChildForBaseline(child) : isOrthogonalChildForBaseline(child);
+}
+
+const BaselineGroup& GridBaselineAlignment::baselineGroupForChild(ItemPosition preference, unsigned sharedContext, const RenderBox& child, GridAxis baselineAxis) const
+{
+    ASSERT(isBaselinePosition(preference));
+    bool isRowAxisContext = baselineAxis == GridColumnAxis;
+    auto& contextsMap = isRowAxisContext ? m_rowAxisAlignmentContext : m_colAxisAlignmentContext;
+    auto* context = contextsMap.get(sharedContext);
+    ASSERT(context);
+    return context->sharedGroup(child, preference);
+}
+
+void GridBaselineAlignment::updateBaselineAlignmentContext(ItemPosition preference, unsigned sharedContext, const RenderBox& child, GridAxis baselineAxis)
+{
+    ASSERT(isBaselinePosition(preference));
+    ASSERT(!child.needsLayout());
+
+    // Determine Ascent and Descent values of this child with respect to
+    // its grid container.
+    LayoutUnit ascent = ascentForChild(child, baselineAxis);
+    LayoutUnit descent = descentForChild(child, ascent, baselineAxis);
+    if (isDescentBaselineForChild(child, baselineAxis))
+        std::swap(ascent, descent);
+
+    // Looking up for a shared alignment context perpendicular to the
+    // baseline axis.
+    bool isRowAxisContext = baselineAxis == GridColumnAxis;
+    auto& contextsMap = isRowAxisContext ? m_rowAxisAlignmentContext : m_colAxisAlignmentContext;
+    auto addResult = contextsMap.add(sharedContext, nullptr);
+
+    // Looking for a compatible baseline-sharing group.
+    if (addResult.isNewEntry)
+        addResult.iterator->value = std::make_unique<BaselineContext>(child, preference, ascent, descent);
+    else {
+        auto* context = addResult.iterator->value.get();
+        context->updateSharedGroup(child, preference, ascent, descent);
+    }
+}
+
+LayoutUnit GridBaselineAlignment::baselineOffsetForChild(ItemPosition preference, unsigned sharedContext, const RenderBox& child, GridAxis baselineAxis) const
+{
+    ASSERT(isBaselinePosition(preference));
+    auto& group = baselineGroupForChild(preference, sharedContext, child, baselineAxis);
+    if (group.size() > 1)
+        return group.maxAscent() - logicalAscentForChild(child, baselineAxis);
+    return LayoutUnit();
+}
+
+void GridBaselineAlignment::clear(GridAxis baselineAxis)
+{
+    if (baselineAxis == GridColumnAxis)
+        m_rowAxisAlignmentContext.clear();
+    else
+        m_colAxisAlignmentContext.clear();
+}
+
+BaselineGroup::BaselineGroup(WritingMode blockFlow, ItemPosition childPreference)
+    : m_maxAscent(0), m_maxDescent(0), m_items()
+{
+    m_blockFlow = blockFlow;
+    m_preference = childPreference;
+}
+
+void BaselineGroup::update(const RenderBox& child, LayoutUnit ascent, LayoutUnit descent)
+{
+    if (m_items.add(&child).isNewEntry) {
+        m_maxAscent = std::max(m_maxAscent, ascent);
+        m_maxDescent = std::max(m_maxDescent, descent);
+    }
+}
+
+bool BaselineGroup::isOppositeBlockFlow(WritingMode blockFlow) const
+{
+    switch (blockFlow) {
+    case WritingMode::TopToBottomWritingMode:
+        return false;
+    case WritingMode::LeftToRightWritingMode:
+        return m_blockFlow == WritingMode::RightToLeftWritingMode;
+    case WritingMode::RightToLeftWritingMode:
+        return m_blockFlow == WritingMode::LeftToRightWritingMode;
+    default:
+        ASSERT_NOT_REACHED();
+        return false;
+    }
+}
+
+bool BaselineGroup::isOrthogonalBlockFlow(WritingMode blockFlow) const
+{
+    switch (blockFlow) {
+    case WritingMode::TopToBottomWritingMode:
+        return m_blockFlow != WritingMode::TopToBottomWritingMode;
+    case WritingMode::LeftToRightWritingMode:
+    case WritingMode::RightToLeftWritingMode:
+        return m_blockFlow == WritingMode::TopToBottomWritingMode;
+    default:
+        ASSERT_NOT_REACHED();
+        return false;
+    }
+}
+
+bool BaselineGroup::isCompatible(WritingMode childBlockFlow, ItemPosition childPreference) const
+{
+    ASSERT(isBaselinePosition(childPreference));
+    ASSERT(size() > 0);
+    return ((m_blockFlow == childBlockFlow || isOrthogonalBlockFlow(childBlockFlow)) && m_preference == childPreference) || (isOppositeBlockFlow(childBlockFlow) && m_preference != childPreference);
+}
+
+BaselineContext::BaselineContext(const RenderBox& child, ItemPosition preference, LayoutUnit ascent, LayoutUnit descent)
+{
+    ASSERT(isBaselinePosition(preference));
+    updateSharedGroup(child, preference, ascent, descent);
+}
+
+const BaselineGroup& BaselineContext::sharedGroup(const RenderBox& child, ItemPosition preference) const
+{
+    ASSERT(isBaselinePosition(preference));
+    return const_cast<BaselineContext*>(this)->findCompatibleSharedGroup(child, preference);
+}
+
+void BaselineContext::updateSharedGroup(const RenderBox& child, ItemPosition preference, LayoutUnit ascent, LayoutUnit descent)
+{
+    ASSERT(isBaselinePosition(preference));
+    BaselineGroup& group = findCompatibleSharedGroup(child, preference);
+    group.update(child, ascent, descent);
+}
+
+// FIXME: Properly implement baseline-group compatibility.
+// See https://github.com/w3c/csswg-drafts/issues/721
+BaselineGroup& BaselineContext::findCompatibleSharedGroup(const RenderBox& child, ItemPosition preference)
+{
+    WritingMode blockDirection = child.style().writingMode();
+    for (auto& group : m_sharedGroups) {
+        if (group.isCompatible(blockDirection, preference))
+            return group;
+    }
+    m_sharedGroups.insert(0, BaselineGroup(blockDirection, preference));
+    return m_sharedGroups[0];
+}
+
+} // namespace WebCore
diff --git a/Source/WebCore/rendering/GridBaselineAlignment.h b/Source/WebCore/rendering/GridBaselineAlignment.h
new file mode 100644 (file)
index 0000000..9dd49fe
--- /dev/null
@@ -0,0 +1,169 @@
+/*
+ * Copyright (C) 2018 Igalia S.L. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#pragma once
+
+#include "GridLayoutFunctions.h"
+
+namespace WebCore {
+
+// These classes are used to implement the Baseline Alignment logic, as described in the CSS Box Alignment
+// specification.
+// https://drafts.csswg.org/css-align/#baseline-terms
+//
+// A baseline-sharing group is composed of boxes that participate in baseline alignment together. This is
+// possible only if they:
+//
+//   * Share an alignment context along an axis perpendicular to their baseline alignment axis.
+//   * Have compatible baseline alignment preferences (i.e., the baselines that want to align are on the same
+//     side of the alignment context).
+//
+// Once the BaselineGroup is instantiated, defined by a 'block-direction' (WritingMode) and a 'baseline-preference'
+// (first/last baseline), it's ready to collect the items that will participate in the Baseline Alignment logic.
+//
+class BaselineGroup {
+public:
+    // It stores an item (if not already present) and update the max_ascent and max_descent associated to this
+    // baseline-sharing group.
+    void update(const RenderBox&, LayoutUnit ascent, LayoutUnit descent);
+    LayoutUnit maxAscent() const { return m_maxAscent; }
+    LayoutUnit maxDescent() const { return m_maxDescent; }
+    int size() const { return m_items.size(); }
+
+private:
+    friend class BaselineContext;
+    BaselineGroup(WritingMode blockFlow, ItemPosition childPreference);
+
+    // Determines whether a baseline-sharing group is compatible with an item, based on its 'block-flow' and
+    // 'baseline-preference'
+    bool isCompatible(WritingMode, ItemPosition) const;
+
+    // Determines whether the baseline-sharing group's associated block-flow is opposite (LR vs RL) to particular
+    // item's writing-mode.
+    bool isOppositeBlockFlow(WritingMode blockFlow) const;
+
+    // Determines whether the baseline-sharing group's associated block-flow is orthogonal (vertical vs horizontal)
+    // to particular item's writing-mode.
+    bool isOrthogonalBlockFlow(WritingMode blockFlow) const;
+
+    WritingMode m_blockFlow;
+    ItemPosition m_preference;
+    LayoutUnit m_maxAscent;
+    LayoutUnit m_maxDescent;
+    HashSet<const RenderBox*> m_items;
+};
+
+// https://drafts.csswg.org/css-align-3/#shared-alignment-context
+// Boxes share an alignment context along a particular axis when they are:
+//
+//  * table cells in the same row, along the table's row (inline) axis
+//  * table cells in the same column, along the table's column (block) axis
+//  * grid items in the same row, along the grid's row (inline) axis
+//  * grid items in the same column, along the grid's colum (block) axis
+//  * flex items in the same flex line, along the flex container's main axis
+//
+// https://drafts.csswg.org/css-align-3/#baseline-sharing-group
+// A Baseline alignment-context may handle several baseline-sharing groups. In order to create an instance, we
+// need to pass the required data to define the first baseline-sharing group; a Baseline Context must have at
+// least one baseline-sharing group.
+//
+// By adding new items to a Baseline Context, the baseline-sharing groups it handles are automatically updated,
+// if there is one that is compatible with such item. Otherwise, a new baseline-sharing group is created,
+// compatible with the new item.
+class BaselineContext {
+public:
+    BaselineContext(const RenderBox& child, ItemPosition preference, LayoutUnit ascent, LayoutUnit descent);
+    const BaselineGroup& sharedGroup(const RenderBox& child, ItemPosition preference) const;
+
+    // Updates the baseline-sharing group compatible with the item.
+    // We pass the item's baseline-preference to avoid dependencies with the LayoutGrid class, which is the one
+    // managing the alignment behavior of the Grid Items.
+    void updateSharedGroup(const RenderBox& child, ItemPosition preference, LayoutUnit ascent, LayoutUnit descent);
+
+private:
+    // Returns the baseline-sharing group compatible with an item.
+    // We pass the item's baseline-preference to avoid dependencies with the LayoutGrid class, which is the one
+    // managing the alignment behavior of the Grid Items.
+    // FIXME: Properly implement baseline-group compatibility.
+    // See https://github.com/w3c/csswg-drafts/issues/721
+    BaselineGroup& findCompatibleSharedGroup(const RenderBox& child, ItemPosition preference);
+
+    Vector<BaselineGroup> m_sharedGroups;
+};
+
+static inline bool isBaselinePosition(ItemPosition position)
+{
+    return position == ItemPosition::Baseline || position == ItemPosition::LastBaseline;
+}
+
+// This is the class that implements the Baseline Alignment logic, using internally the BaselineContext and
+// BaselineGroupd classes (described above).
+//
+// The first phase is to collect the items that will participate in baseline alignment together. During this
+// phase the required baseline-sharing groups will be created for each Baseline alignment-context shared by
+// the items participating in the baseline alignment.
+//
+// Additionally, the baseline-sharing groups' offsets, max-ascend and max-descent will be computed and stored.
+// This class also computes the baseline offset for a particular item, based on the max-ascent for its associated
+// baseline-sharing group.
+class GridBaselineAlignment {
+public:
+    // Collects the items participating in baseline alignment and updates the corresponding baseline-sharing
+    // group of the Baseline Context the items belongs to.
+    // All the baseline offsets are updated accordingly based on the added item.
+    void updateBaselineAlignmentContext(ItemPosition, unsigned sharedContext, const RenderBox&, GridAxis);
+
+    // Returns the baseline offset of a particular item, based on the max-ascent for its associated
+    // baseline-sharing group
+    LayoutUnit baselineOffsetForChild(ItemPosition, unsigned sharedContext, const RenderBox&, GridAxis) const;
+
+    // Sets the Grid Container's writing-mode so that we can avoid the dependecy of the LayoutGrid class for
+    // determining whether a grid item is orthogonal or not.
+    void setBlockFlow(WritingMode blockFlow) { m_blockFlow = blockFlow; };
+
+    // Clearing the Baseline Alignment context and their internal classes and data structures.
+    void clear(GridAxis);
+
+private:
+    const BaselineGroup& baselineGroupForChild(ItemPosition, unsigned sharedContext, const RenderBox&, GridAxis) const;
+    LayoutUnit marginOverForChild(const RenderBox&, GridAxis) const;
+    LayoutUnit marginUnderForChild(const RenderBox&, GridAxis) const;
+    LayoutUnit logicalAscentForChild(const RenderBox&, GridAxis) const;
+    LayoutUnit ascentForChild(const RenderBox&, GridAxis) const;
+    LayoutUnit descentForChild(const RenderBox&, LayoutUnit, GridAxis) const;
+    bool isDescentBaselineForChild(const RenderBox&, GridAxis) const;
+    bool isHorizontalBaselineAxis(GridAxis) const;
+    bool isOrthogonalChildForBaseline(const RenderBox&) const;
+    bool isParallelToBaselineAxisForChild(const RenderBox&, GridAxis) const;
+
+    typedef HashMap<unsigned, std::unique_ptr<BaselineContext>, DefaultHash<unsigned>::Hash, WTF::UnsignedWithZeroKeyHashTraits<unsigned>> BaselineContextsMap;
+
+    // Grid Container's WritingMode, used to determine grid item's orthogonality.
+    WritingMode m_blockFlow;
+    BaselineContextsMap m_rowAxisAlignmentContext;
+    BaselineContextsMap m_colAxisAlignmentContext;
+};
+
+} // namespace WebCore
index 4dfe6ea..874fe55 100644 (file)
@@ -30,6 +30,8 @@
 
 namespace WebCore {
 
+enum GridAxis { GridRowAxis, GridColumnAxis };
+
 namespace GridLayoutFunctions {
 
 LayoutUnit computeMarginLogicalSizeForChild(const RenderGrid&, GridTrackSizingDirection, const RenderBox&);
index 6481a32..dc3e842 100644 (file)
@@ -91,6 +91,16 @@ void GridTrack::ensureGrowthLimitIsBiggerThanBaseSize()
 
 // Static helper methods.
 
+static GridAxis gridAxisForDirection(GridTrackSizingDirection direction)
+{
+    return direction == ForColumns ? GridRowAxis : GridColumnAxis;
+}
+
+static GridTrackSizingDirection gridDirectionForAxis(GridAxis axis)
+{
+    return axis == GridRowAxis ? ForColumns : ForRows;
+}
+
 static bool shouldClearOverrideContainingBlockContentSizeForChild(const RenderBox& child, GridTrackSizingDirection direction)
 {
     if (direction == ForColumns)
@@ -132,6 +142,12 @@ void GridTrackSizingAlgorithm::setFreeSpace(GridTrackSizingDirection direction,
         m_freeSpaceRows = freeSpace;
 }
 
+std::optional<LayoutUnit> GridTrackSizingAlgorithm::availableSpace() const
+{
+    ASSERT(wasSetup());
+    return availableSpace(m_direction);
+}
+
 void GridTrackSizingAlgorithm::setAvailableSpace(GridTrackSizingDirection direction, std::optional<LayoutUnit> availableSpace)
 {
     if (direction == ForColumns)
@@ -599,6 +615,27 @@ bool GridTrackSizingAlgorithm::isRelativeGridLengthAsAuto(const GridLength& leng
     return length.isPercentage() && !availableSpace(direction);
 }
 
+bool GridTrackSizingAlgorithm::isIntrinsicSizedGridArea(const RenderBox& child, GridAxis axis) const
+{
+    ASSERT(wasSetup());
+    GridTrackSizingDirection direction = gridDirectionForAxis(axis);
+    const GridSpan& span = m_grid.gridItemSpan(child, direction);
+    for (auto trackPosition : span) {
+        GridTrackSize trackSize = rawGridTrackSize(direction, trackPosition);
+        // We consider fr units as 'auto' for the min sizing function.
+        // FIXME(jfernandez): https://github.com/w3c/csswg-drafts/issues/2611
+        //
+        // The use of AvailableSize function may imply different results
+        // for the same item when assuming indefinite or definite size
+        // constraints depending on the phase we evaluate the item's
+        // baseline participation.
+        // FIXME(jfernandez): https://github.com/w3c/csswg-drafts/issues/3046
+        if (trackSize.isContentSized() || trackSize.isFitContent() || trackSize.minTrackBreadth().isFlex() || (trackSize.maxTrackBreadth().isFlex() && !availableSpace(direction)))
+            return true;
+    }
+    return false;
+}
+
 GridTrackSize GridTrackSizingAlgorithm::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
 {
     ASSERT(wasSetup());
@@ -727,7 +764,7 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::logicalHeightForChild(RenderBox& ch
         child.clearOverrideContentLogicalHeight();
 
     child.layoutIfNeeded();
-    return child.logicalHeight() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childBlockDirection, child);
+    return child.logicalHeight() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childBlockDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
 }
 
 LayoutUnit GridTrackSizingAlgorithmStrategy::minContentForChild(RenderBox& child) const
@@ -736,7 +773,7 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::minContentForChild(RenderBox& child
     if (direction() == childInlineDirection) {
         // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
         // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
-        return child.minPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child);
+        return child.minPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
     }
 
     if (updateOverrideContainingBlockContentSizeForChild(child, childInlineDirection))
@@ -750,7 +787,7 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::maxContentForChild(RenderBox& child
     if (direction() == childInlineDirection) {
         // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
         // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
-        return child.maxPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child);
+        return child.maxPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
     }
 
     if (updateOverrideContainingBlockContentSizeForChild(child, childInlineDirection))
@@ -786,14 +823,83 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::minSizeForChild(RenderBox& child) c
     if (!childSize.isAuto())
         return minContentForChild(child);
 
+    LayoutUnit baselineShim = m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
     LayoutUnit gridAreaSize = m_algorithm.gridAreaBreadthForChild(child, childInlineDirection);
     if (isRowAxis)
-        return minLogicalWidthForChild(child, childMinSize, gridAreaSize);
+        return minLogicalWidthForChild(child, childMinSize, gridAreaSize) + baselineShim;
 
     bool overrideSizeHasChanged = updateOverrideContainingBlockContentSizeForChild(child, childInlineDirection, gridAreaSize);
     layoutGridItemForMinSizeComputation(child, overrideSizeHasChanged);
 
-    return child.computeLogicalHeightUsing(MinSize, childMinSize, std::nullopt).value_or(0) + child.marginLogicalHeight() + child.scrollbarLogicalHeight();
+    return child.computeLogicalHeightUsing(MinSize, childMinSize, std::nullopt).value_or(0) + child.marginLogicalHeight() + child.scrollbarLogicalHeight() + baselineShim;
+}
+
+bool GridTrackSizingAlgorithm::canParticipateInBaselineAlignment(const RenderBox& child, GridAxis baselineAxis) const
+{
+    ASSERT(baselineAxis == GridColumnAxis ? m_columnBaselineItemsMap.contains(&child) : m_rowBaselineItemsMap.contains(&child));
+
+    // Baseline cyclic dependencies only happen with synthesized
+    // baselines. These cases include orthogonal or empty grid items
+    // and replaced elements.
+    bool isParallelToBaselineAxis = baselineAxis == GridColumnAxis ? !GridLayoutFunctions::isOrthogonalChild(*m_renderGrid, child) : GridLayoutFunctions::isOrthogonalChild(*m_renderGrid, child);
+    if (isParallelToBaselineAxis && child.firstLineBaseline())
+        return true;
+
+    // Baseline cyclic dependencies only happen in grid areas with
+    // intrinsically-sized tracks. 
+    if (!isIntrinsicSizedGridArea(child, baselineAxis))
+        return true;
+
+    return isParallelToBaselineAxis ? !child.hasRelativeLogicalHeight() : !child.hasRelativeLogicalWidth() && !child.style().logicalWidth().isAuto();
+}
+
+bool GridTrackSizingAlgorithm::participateInBaselineAlignment(const RenderBox& child, GridAxis baselineAxis) const
+{
+    return baselineAxis == GridColumnAxis ? m_columnBaselineItemsMap.get(&child) : m_rowBaselineItemsMap.get(&child);
+}
+
+void GridTrackSizingAlgorithm::updateBaselineAlignmentContext(const RenderBox& child, GridAxis baselineAxis)
+{
+    ASSERT(wasSetup());
+    ASSERT(canParticipateInBaselineAlignment(child, baselineAxis));
+    ASSERT(!child.needsLayout());
+
+    ItemPosition align = m_renderGrid->selfAlignmentForChild(baselineAxis, child).position();
+    const auto& span = m_grid.gridItemSpan(child, gridDirectionForAxis(baselineAxis));
+    m_baselineAlignment.updateBaselineAlignmentContext(align, span.startLine(), child, baselineAxis);
+}
+
+LayoutUnit GridTrackSizingAlgorithm::baselineOffsetForChild(const RenderBox& child, GridAxis baselineAxis) const
+{
+    if (!participateInBaselineAlignment(child, baselineAxis))
+        return LayoutUnit();
+
+    ItemPosition align = m_renderGrid->selfAlignmentForChild(baselineAxis, child).position();
+    const auto& span = m_grid.gridItemSpan(child, gridDirectionForAxis(baselineAxis));
+    return m_baselineAlignment.baselineOffsetForChild(align, span.startLine(), child, baselineAxis);
+}
+
+void GridTrackSizingAlgorithm::clearBaselineItemsCache()
+{
+    m_columnBaselineItemsMap.clear();
+    m_rowBaselineItemsMap.clear();
+}
+
+void GridTrackSizingAlgorithm::cacheBaselineAlignedItem(const RenderBox& item, GridAxis axis)
+{
+    ASSERT(m_renderGrid->isBaselineAlignmentForChild(item, axis));
+    if (axis == GridColumnAxis)
+        m_columnBaselineItemsMap.add(&item, true);
+    else
+        m_rowBaselineItemsMap.add(&item, true);
+}
+
+void GridTrackSizingAlgorithm::copyBaselineItemsCache(const GridTrackSizingAlgorithm& source, GridAxis axis)
+{
+    if (axis == GridColumnAxis)
+        m_columnBaselineItemsMap = source.m_columnBaselineItemsMap;
+    else
+        m_rowBaselineItemsMap = source.m_rowBaselineItemsMap;
 }
 
 bool GridTrackSizingAlgorithmStrategy::updateOverrideContainingBlockContentSizeForChild(RenderBox& child, GridTrackSizingDirection direction, std::optional<LayoutUnit> overrideSize) const
@@ -1174,6 +1280,27 @@ void GridTrackSizingAlgorithm::setup(GridTrackSizingDirection direction, unsigne
 
     m_needsSetup = false;
     m_hasPercentSizedRowsIndefiniteHeight = false;
+
+    computeBaselineAlignmentContext();
+}
+
+void GridTrackSizingAlgorithm::computeBaselineAlignmentContext()
+{
+    GridAxis axis = gridAxisForDirection(m_direction);
+    m_baselineAlignment.clear(axis);
+    m_baselineAlignment.setBlockFlow(m_renderGrid->style().writingMode());
+    BaselineItemsCache& baselineItemsCache = axis == GridColumnAxis ? m_columnBaselineItemsMap : m_rowBaselineItemsMap;
+    BaselineItemsCache tmpBaselineItemsCache = baselineItemsCache;
+    for (auto* child : tmpBaselineItemsCache.keys()) {
+        // FIXME (jfernandez): We may have to get rid of the baseline participation
+        // flag (hence just using a HashSet) depending on the CSS WG resolution on
+        // https://github.com/w3c/csswg-drafts/issues/3046
+        if (canParticipateInBaselineAlignment(*child, axis)) {
+            updateBaselineAlignmentContext(*child, axis);
+            baselineItemsCache.set(child, true);
+        } else
+            baselineItemsCache.set(child, false);
+    }
 }
 
 void GridTrackSizingAlgorithm::run()
index 5915c5a..0606220 100644 (file)
@@ -25,6 +25,7 @@
 #pragma once
 
 #include "Grid.h"
+#include "GridBaselineAlignment.h"
 #include "GridTrackSize.h"
 #include "LayoutUnit.h"
 
@@ -110,6 +111,11 @@ public:
     LayoutUnit maxContentSize() const { return m_maxContentSize; };
 
     LayoutSize estimatedGridAreaBreadthForChild(const RenderBox&) const;
+    LayoutUnit baselineOffsetForChild(const RenderBox&, GridAxis) const;
+
+    void cacheBaselineAlignedItem(const RenderBox&, GridAxis);
+    void copyBaselineItemsCache(const GridTrackSizingAlgorithm&, GridAxis);
+    void clearBaselineItemsCache();
 
     Vector<GridTrack>& tracks(GridTrackSizingDirection direction) { return direction == ForColumns ? m_columns : m_rows; }
     const Vector<GridTrack>& tracks(GridTrackSizingDirection direction) const { return direction == ForColumns ? m_columns : m_rows; }
@@ -129,7 +135,7 @@ public:
 #endif
 
 private:
-    std::optional<LayoutUnit> availableSpace() const { return availableSpace(m_direction); }
+    std::optional<LayoutUnit> availableSpace() const;
     bool isRelativeGridLengthAsAuto(const GridLength&, GridTrackSizingDirection) const;
     GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned translatedIndex) const;
     const GridTrackSize& rawGridTrackSize(GridTrackSizingDirection, unsigned translatedIndex) const;
@@ -148,6 +154,12 @@ private:
     LayoutUnit estimatedGridAreaBreadthForChild(const RenderBox&, GridTrackSizingDirection) const;
     LayoutUnit gridAreaBreadthForChild(const RenderBox&, GridTrackSizingDirection) const;
 
+    void computeBaselineAlignmentContext();
+    void updateBaselineAlignmentContext(const RenderBox&, GridAxis);
+    bool canParticipateInBaselineAlignment(const RenderBox&, GridAxis) const;
+    bool participateInBaselineAlignment(const RenderBox&, GridAxis) const;
+
+    bool isIntrinsicSizedGridArea(const RenderBox&, GridAxis) const;
     void computeGridContainerIntrinsicSizes();
 
     // Helper methods for step 4. Strech flexible tracks.
@@ -210,6 +222,11 @@ private:
     };
     SizingState m_sizingState;
 
+    GridBaselineAlignment m_baselineAlignment;
+    typedef HashMap<const RenderBox*, bool> BaselineItemsCache;
+    BaselineItemsCache m_columnBaselineItemsMap;
+    BaselineItemsCache m_rowBaselineItemsMap;
+
     // This is a RAII class used to ensure that the track sizing algorithm is
     // executed as it is suppossed to be, i.e., first resolve columns and then
     // rows. Only if required a second iteration is run following the same order,
index 32ddace..5afcea4 100644 (file)
@@ -3000,7 +3000,7 @@ void RenderBlockFlow::markLinesDirtyInBlockRange(LayoutUnit logicalTop, LayoutUn
 
 std::optional<int> RenderBlockFlow::firstLineBaseline() const
 {
-    if (isWritingModeRoot() && !isRubyRun())
+    if (isWritingModeRoot() && !isRubyRun() && !isGridItem())
         return std::nullopt;
 
     if (!childrenInline())
index ab7c2df..54a98eb 100644 (file)
@@ -206,8 +206,18 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
             // We may need to repeat the track sizing in case of any grid item was orthogonal.
             if (GridLayoutFunctions::isOrthogonalChild(*this, *child))
                 m_hasAnyOrthogonalItem = true;
-        }
 
+            // We keep a cache of items with baseline as alignment values so
+            // that we only compute the baseline shims for such items. This
+            // cache is needed for performance related reasons due to the
+            // cost of evaluating the item's participation in a baseline
+            // context during the track sizing algorithm.
+            if (isBaselineAlignmentForChild(*child, GridColumnAxis))
+                m_trackSizingAlgorithm.cacheBaselineAlignedItem(*child, GridColumnAxis);
+            if (isBaselineAlignmentForChild(*child, GridRowAxis))
+                m_trackSizingAlgorithm.cacheBaselineAlignedItem(*child, GridRowAxis);
+        }
+        m_baselineItemsCached = true;
         setLogicalHeight(0);
         updateLogicalWidth();
 
@@ -298,6 +308,9 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
     repainter.repaintAfterLayout();
 
     clearNeedsLayout();
+
+    m_trackSizingAlgorithm.clearBaselineItemsCache();
+    m_baselineItemsCached = false;
 }
 
 LayoutUnit RenderGrid::gridGap(GridTrackSizingDirection direction, std::optional<LayoutUnit> availableSize) const
@@ -392,6 +405,17 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
 
     performGridItemsPreLayout(algorithm);
 
+    if (m_baselineItemsCached)
+        algorithm.copyBaselineItemsCache(m_trackSizingAlgorithm, GridRowAxis);
+    else {
+        for (auto* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+            if (child->isOutOfFlowPositioned())
+                continue;
+            if (isBaselineAlignmentForChild(*child, GridRowAxis))
+                algorithm.cacheBaselineAlignedItem(*child, GridRowAxis);
+        }
+    }
+
     computeTrackSizesForIndefiniteSize(algorithm, ForColumns, minLogicalWidth, maxLogicalWidth);
 
     if (hadExcludedChildren) {
@@ -593,6 +617,13 @@ void RenderGrid::placeItemsOnGrid(GridTrackSizingAlgorithm& algorithm, std::opti
         if (grid.orderIterator().shouldSkipChild(*child))
             continue;
 
+        // Grid items should use the grid area sizes instead of the containing block (grid container)
+        // sizes, we initialize the overrides here if needed to ensure it.
+        if (!child->hasOverrideContainingBlockContentLogicalWidth())
+            child->setOverrideContainingBlockContentLogicalWidth(LayoutUnit());
+        if (!child->hasOverrideContainingBlockContentLogicalHeight())
+            child->setOverrideContainingBlockContentLogicalHeight(LayoutUnit(-1));
+
         GridArea area = grid.gridItemArea(*child);
         if (!area.rows.isIndefinite())
             area.rows.translate(std::abs(grid.smallestTrackStart(ForRows)));
@@ -652,6 +683,14 @@ void RenderGrid::performGridItemsPreLayout(const GridTrackSizingAlgorithm& algor
         if (GridLayoutFunctions::isOrthogonalChild(*this, *child)) {
             updateGridAreaLogicalSize(*child, algorithm.estimatedGridAreaBreadthForChild(*child));
             child->layoutIfNeeded();
+            continue;
+        }
+        // We need to layout the item to know whether it must synthesize its
+        // baseline or not, which may imply a cyclic sizing dependency.
+        // FIXME: Can we avoid it ?
+        if (isBaselineAlignmentForChild(*child)) {
+            updateGridAreaLogicalSize(*child, algorithm.estimatedGridAreaBreadthForChild(*child));
+            child->layoutIfNeeded();
         }
     }
 }
@@ -1182,9 +1221,23 @@ static int synthesizedBaselineFromBorderBox(const RenderBox& box, LineDirectionM
     return (direction == HorizontalLine ? box.size().height() : box.size().width()).toInt();
 }
 
-bool RenderGrid::isInlineBaselineAlignedChild(const RenderBox& child) const
+static int synthesizedBaselineFromMarginBox(const RenderBox& box, LineDirectionMode direction)
+{
+    return (direction == HorizontalLine ? box.size().height() + box.verticalMarginExtent() : box.size().width() + box.horizontalMarginExtent()).toInt();
+}
+
+bool RenderGrid::isBaselineAlignmentForChild(const RenderBox& child) const
+{
+    return isBaselineAlignmentForChild(child, GridRowAxis) || isBaselineAlignmentForChild(child, GridColumnAxis);
+}
+
+bool RenderGrid::isBaselineAlignmentForChild(const RenderBox& child, GridAxis baselineAxis) const
 {
-    return alignSelfForChild(child).position() == ItemPosition::Baseline && !GridLayoutFunctions::isOrthogonalChild(*this, child) && !hasAutoMarginsInColumnAxis(child);
+    if (child.isOutOfFlowPositioned())
+        return false;
+    ItemPosition align = selfAlignmentForChild(baselineAxis, child).position();
+    bool hasAutoMargins = baselineAxis == GridColumnAxis ? hasAutoMarginsInColumnAxis(child) : hasAutoMarginsInRowAxis(child);
+    return isBaselinePosition(align) && !hasAutoMargins;
 }
 
 // FIXME: This logic is shared by RenderFlexibleBox, so it might be refactored somehow.
@@ -1195,10 +1248,7 @@ int RenderGrid::baselinePosition(FontBaseline, bool, LineDirectionMode direction
 #else
     UNUSED_PARAM(mode);
 #endif
-    int baseline = firstLineBaseline().value_or(synthesizedBaselineFromBorderBox(*this, direction));
-
-    int marginSize = direction == HorizontalLine ? verticalMarginExtent() : horizontalMarginExtent();
-    return baseline + marginSize;
+    return firstLineBaseline().value_or(synthesizedBaselineFromMarginBox(*this, direction));
 }
 
 std::optional<int> RenderGrid::firstLineBaseline() const
@@ -1213,7 +1263,7 @@ std::optional<int> RenderGrid::firstLineBaseline() const
         for (auto& child : m_grid.cell(0, column)) {
             ASSERT(child.get());
             // If an item participates in baseline alignment, we select such item.
-            if (isInlineBaselineAlignedChild(*child)) {
+            if (isBaselineAlignmentForChild(*child)) {
                 // FIXME: self-baseline and content-baseline alignment not implemented yet.
                 baselineChild = child.get();
                 break;
@@ -1242,10 +1292,20 @@ std::optional<int> RenderGrid::inlineBlockBaseline(LineDirectionMode direction)
     if (std::optional<int> baseline = firstLineBaseline())
         return baseline;
 
-    int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
+    int marginAscent = direction == HorizontalLine ? marginBottom() : marginRight();
     return synthesizedBaselineFromBorderBox(*this, direction) + marginAscent;
 }
 
+LayoutUnit RenderGrid::columnAxisBaselineOffsetForChild(const RenderBox& child) const
+{
+    return m_trackSizingAlgorithm.baselineOffsetForChild(child, GridColumnAxis);
+}
+
+LayoutUnit RenderGrid::rowAxisBaselineOffsetForChild(const RenderBox& child) const
+{
+    return m_trackSizingAlgorithm.baselineOffsetForChild(child, GridRowAxis);
+}
+
 GridAxisPosition RenderGrid::columnAxisPositionForChild(const RenderBox& child) const
 {
     bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
@@ -1393,7 +1453,7 @@ LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const
     GridAxisPosition axisPosition = columnAxisPositionForChild(child);
     switch (axisPosition) {
     case GridAxisStart:
-        return startPosition;
+        return startPosition + columnAxisBaselineOffsetForChild(child);
     case GridAxisEnd:
     case GridAxisCenter: {
         LayoutUnit columnAxisChildSize = GridLayoutFunctions::isOrthogonalChild(*this, child) ? child.logicalWidth() + child.marginLogicalWidth() : child.logicalHeight() + child.marginLogicalHeight();
@@ -1418,7 +1478,7 @@ LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox& child) const
     GridAxisPosition axisPosition = rowAxisPositionForChild(child);
     switch (axisPosition) {
     case GridAxisStart:
-        return startPosition;
+        return startPosition + rowAxisBaselineOffsetForChild(child);
     case GridAxisEnd:
     case GridAxisCenter: {
         LayoutUnit rowAxisChildSize = GridLayoutFunctions::isOrthogonalChild(*this, child) ? child.logicalHeight() + child.marginLogicalHeight() : child.logicalWidth() + child.marginLogicalWidth();
index f35910c..7de5fee 100644 (file)
@@ -46,7 +46,6 @@ public:
 };
 
 enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
-enum GridAxis { GridRowAxis, GridColumnAxis };
 
 class RenderGrid final : public RenderBlock {
     WTF_MAKE_ISO_ALLOCATED(RenderGrid);
@@ -75,6 +74,10 @@ public:
     LayoutUnit gridItemOffset(GridTrackSizingDirection) const;
 
     void updateGridAreaLogicalSize(RenderBox&, LayoutSize) const;
+    bool isBaselineAlignmentForChild(const RenderBox&) const;
+    bool isBaselineAlignmentForChild(const RenderBox&, GridAxis) const;
+
+    StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
 
     StyleContentAlignmentData contentAlignment(GridTrackSizingDirection) const;
 
@@ -90,7 +93,6 @@ private:
     bool isRenderGrid() const override { return true; }
     void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
 
-    StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
     bool selfAlignmentChangedToStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
     bool selfAlignmentChangedFromStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
 
@@ -173,6 +175,9 @@ private:
     std::optional<int> inlineBlockBaseline(LineDirectionMode) const final;
     bool isInlineBaselineAlignedChild(const RenderBox&) const;
 
+    LayoutUnit columnAxisBaselineOffsetForChild(const RenderBox&) const;
+    LayoutUnit rowAxisBaselineOffsetForChild(const RenderBox&) const;
+
     LayoutUnit gridGap(GridTrackSizingDirection) const;
     LayoutUnit gridGap(GridTrackSizingDirection, std::optional<LayoutUnit> availableSize) const;
 
@@ -199,6 +204,7 @@ private:
     std::optional<LayoutUnit> m_maxContentHeight;
 
     bool m_hasAnyOrthogonalItem {false};
+    bool m_baselineItemsCached {false};
 };
 
 } // namespace WebCore