Changeset 238457 in webkit


Ignore:
Timestamp:
Nov 23, 2018 3:04:23 AM (5 years ago)
Author:
jfernandez@igalia.com
Message:

[css-grid] Implement Baseline Alignment for grid items
​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:
Location:
trunk
Files:
14 added
60 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r238451 r238457  
     12018-11-23  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-grid] Implement Baseline Alignment for grid items
     4        https://bugs.webkit.org/show_bug.cgi?id=145566
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        Most of the baseline realated tests pass now; just a few still fail because of unrelated bugs.
     9
     10        * TestExpectations: Removed several entries, related to the baseline tests that are now passing.
     11        * fast/css-grid-layout/grid-align-baseline-expected.txt:
     12        * fast/css-grid-layout/grid-align-baseline-vertical-expected.txt:
     13        * fast/css-grid-layout/grid-baseline-expected.html:
     14        * fast/css-grid-layout/grid-baseline-margins-expected.html:
     15        * fast/css-grid-layout/grid-baseline-margins.html:
     16        * fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt:
     17        * fast/css-grid-layout/grid-baseline-must-respect-grid-order.html:
     18        * fast/css-grid-layout/grid-baseline.html:
     19        * fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash-expected.txt: Added.
     20        * fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html: Added.
     21        * fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash-expected.txt: Added.
     22        * fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html: Added.
     23        * fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash-expected.txt: Added.
     24        * fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html: Added.
     25        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash-expected.txt: Added.
     26        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html: Added.
     27        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash-expected.txt: Added.
     28        * fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html: Added.
     29        * fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash-expected.txt: Added.
     30        * fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html: Added.
     31        * fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt:
     32        * fast/css-grid-layout/grid-self-baseline-two-dimensional.html:
     33
    1342018-11-22  Dean Jackson  <dino@apple.com>
    235

  • trunk/LayoutTests/TestExpectations

    r238438 r238457  
    581581webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html [ ImageOnlyFailure ]
    582582webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html [ ImageOnlyFailure ]
    583 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 ]
    584 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 ]
    585 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 ]
    586 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 ]
    587 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 ]
    588 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 ]
    589 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 ]
    590 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 ]
    591 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 ]
    592 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 ]
    593 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 ]
    594 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 ]
    595 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-01.html [ Skip ]
    596 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02-b.html [ Skip ]
    597 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02.html [ Skip ]
    598 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-03.html [ Skip ]
    599 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-04.html [ Skip ]
    600 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-05.html [ Skip ]
    601 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-06.html [ Skip ]
    602 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-07.html [ Skip ]
    603 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-01.html [ Skip ]
    604 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-02.html [ Skip ]
    605 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-03.html [ Skip ]
    606 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-04.html [ Skip ]
    607 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-05.html [ Skip ]
    608 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-06.html [ Skip ]
    609 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-07.html [ Skip ]
    610 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html [ Skip ]
    611 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html [ Skip ]
    612 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html [ Skip ]
    613 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html [ Skip ]
    614 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html [ Skip ]
    615 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html [ Skip ]
    616 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html [ Skip ]
    617 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html [ Skip ]
    618 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html [ Skip ]
    619 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html [ Skip ]
    620 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ Skip ]
    621 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ Skip ]
    622 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html [ Skip ]
    623 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html [ Skip ]
    624 webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-two-dimensional.html [ Failure ]
    625 webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline.html [ Failure ]
    626 webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
    627583webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
    628584webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
    … …  
    632588webkit.org/b/191462 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html [ ImageOnlyFailure ]
    633589webkit.org/b/191463 imported/w3c/web-platform-tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
     590webkit.org/b/191627 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html [ Failure ]
    634591webkit.org/b/191473 fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html [ Crash ]
    635592webkit.org/b/149890 fast/css-grid-layout/grid-shorthands-style-format.html [ Failure ]

  • trunk/LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt

    r238105 r238457  
    77
    88
    9 baseline1 and baseline2 should have the same baseline.baseline4 and baseline5 should be below baseline6.
    109
    1110PASS .grid 1

  • trunk/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt

    r238105 r238457  
    1515
    1616
    17 baseline1 and baseline2 should have the same baseline.
    18 baseline4 and baseline5 should be below baseline6.
    1917
    2018PASS .grid 1

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html

    r210792 r238457  
    11<!DOCTYPE html>
     2<html>
    23<style>
    34body {
    … …  
    203204
    204205</body>
     206</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html

    r210792 r238457  
    1818.padding { padding: 13px; }
    1919.margin { margin: 8px 0; }
    20 .border-padding-margin {
    21    border: 5px solid pink;
    22    padding: 7px;
    23    margin: 3px 0;
    24 }
    2520.flexbox > div {
    2621    min-width: 0;
    … …  
    2823}
    2924</style>
     25<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
    3026<div>
    3127before text
    … …  
    7773<div>
    7874Should align with the top
    79 <div class="inline-block border-padding-margin" style="background-color: pink;">
    80   <div class="flexbox border-padding-margin" style="width: 100px; height: 100px; background-color: pink">
     75<div class="inline-block border margin padding" style="background-color: pink">
     76  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
    8177      <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
    8278  </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html

    r210792 r238457  
    1010.padding { padding: 13px; }
    1111.margin { margin: 8px 0; }
    12 .border-padding-margin {
    13    border: 5px solid pink;
    14    padding: 7px;
    15    margin: 3px 0;
    16 }
    1712</style>
     13<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
    1814<div>
    1915before text
    … …  
    6561<div>
    6662Should align with the top
    67 <div class="inline-block border-padding-margin" style="background-color: pink">
    68   <div class="grid border border-padding-margin" style="width: 100px; height: 100px; background-color: pink">
     63<div class="inline-block border margin padding" style="background-color: pink">
     64  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
    6965      <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
    7066  </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt

    r210792 r238457  
     1
     2PASS .grid, container 1
     3PASS .grid, container 2
     4PASS .grid, container 3
     5PASS .grid, container 4
     6PASS .grid, container 5
     7PASS .grid, container 6
     8PASS .grid, container 7
     9PASS .grid, container 8
     10PASS .grid, container 9
     11PASS .grid, container 10
     12PASS .grid, container 11
     13PASS .grid, container 12
     14PASS .grid, container 13
     15PASS .grid, container 14
     16PASS .grid, container 15
     17PASS .grid, container 16
     18PASS .grid, container 17
     19PASS .grid, container 18
    120The test shows 3 grids each of them with 3 items sorted differently in the DOM.
    221Each 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.
    … …  
    625 
    726 
    8  PASS
    9 PASS
    10 PASS
    1127This 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.
    1228
    1329 
    1430 
    15  PASS
    16 PASS
    17 PASS
    1831This 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.
    1932
    2033 
    2134 
    22  PASS
    23 PASS
    24 PASS
    2535This 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.
    2636
    2737 
    2838 
    29  PASS
    30 PASS
    31 PASS
    3239This case shows one of the grids with no items, hence its baseline must be synthesized.
    3340
    3441 
    3542 
    36 PASS
    37 PASS
    38 PASS
    3943This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
    4044
    4145 
    4246 
    43  PASS
    44 PASS
    45 PASS
     47

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

    r210792 r238457  
    5858}
    5959</style>
    60 <script src="../../resources/check-layout.js"></script>
     60<script src="../../resources/testharness.js"></script>
     61<script src="../../resources/testharnessreport.js"></script>
     62<script src="../../resources/check-layout-th.js"></script>
    6163<body onload="checkLayout('.grid, container')">
    6264<div id="log"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-baseline.html

    r210792 r238457  
    11<!DOCTYPE html>
     2<html>
    23<style>
    34body {
    … …  
    9495<div>
    9596should align with the bottom
    96 <div class="empty inline-grid" style="width: 30px; height: 30px">
     97<div class="inline-grid" style="width: 30px; height: 30px">
    9798</div>
    9899of the grey box
    … …  
    209210
    210211</body>
     212</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html

    r238105 r238457  
    2424.extraRightPadding { padding-right: 30px; }
    2525.extraLeftPadding { padding-left: 30px; }
    26 .item { display: inline; }
     26.item { float: left; clear: both; }
    2727.left { vertical-align: bottom; }
    2828</style>
    2929
    3030<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>
    31 <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>
    32 <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>
     31<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>
     32<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>

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt

    r238105 r238457  
    1212PASS .grid 11
    1313PASS .grid 12
    14 
    1514This 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.
    1615

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html

    r238105 r238457  
    88   margin: 5px;
    99   font-family: Ahem;
     10   -webkit-text-orientation: sideways;
    1011}
    1112.font12 { font-size:24px; }
    … …  
    4748<div style="position: relative">
    4849    <div class="grid fit-content itemsBaseline">
    49         <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>
    50         <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>
    51         <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>
    52         <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>
     50        <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>
     51        <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>
     52        <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>
     53        <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>
    5354    </div>
    5455</div>
    … …  
    5859<div style="position: relative">
    5960    <div class="grid fit-content itemsBaseline">
    60         <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>
    61         <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>
    62         <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>
    63         <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>
     61        <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>
     62        <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>
     63        <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>
     64        <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>
    6465    </div>
    6566</div>
    … …  
    8081<div style="position: relative">
    8182    <div class="grid fit-content itemsBaseline verticalLR">
    82         <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>
    83         <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>
    84         <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>
    85         <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>
     83        <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>
     84        <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>
     85        <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>
     86        <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>
    8687    </div>
    8788</div>
    … …  
    9192<div style="position: relative">
    9293    <div class="grid fit-content itemsBaseline verticalLR">
    93         <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>
    94         <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>
    95         <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>
    96         <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>
     94        <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>
     95        <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>
     96        <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>
     97        <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>
    9798    </div>
    9899</div>
    … …  
    113114<div style="position: relative">
    114115    <div class="grid fit-content itemsBaseline verticalRL">
    115         <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>
    116         <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>
    117         <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>
    118         <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>
     116        <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>
     117        <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>
     118        <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>
     119        <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>
    119120    </div>
    120121</div>
    … …  
    124125<div style="position: relative">
    125126    <div class="grid fit-content itemsBaseline verticalRL">
    126         <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>
    127         <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>
    128         <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>
    129         <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>
     127        <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>
     128        <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>
     129        <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>
     130        <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>
    130131    </div>
    131132</div>
    … …  
    146147<div style="position: relative">
    147148    <div class="grid fit-content itemsBaseline">
    148         <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>
    149         <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>
    150         <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>
    151         <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>
     149        <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>
     150        <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>
     151        <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>
     152        <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>
    152153    </div>
    153154</div>
    … …  
    157158<div style="position: relative">
    158159    <div class="grid fit-content itemsBaseline">
    159         <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>
    160         <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>
     160        <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>
     161        <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>
    161162        <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>
    162         <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>
     163        <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>
    163164    </div>
    164165</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html

    r238105 r238457  
    99   margin: 5px;
    1010   text-orientation: sideways;
    11    width: 350px;
     11   width: 360px;
    1212   height: 100px;
    1313}

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html

    r238105 r238457  
    99   margin: 5px;
    1010   text-orientation: sideways;
    11    width: 350px;
     11   width: 360px;
    1212   height: 100px;
    1313}

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html

    r238105 r238457  
    99   margin: 5px;
    1010   text-orientation: sideways;
    11    width: 350px;
     11   width: 360px;
    1212   height: 100px;
    1313}

  • trunk/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html

    r238105 r238457  
    99   margin: 5px;
    1010   text-orientation: sideways;
    11    width: 350px;
     11   width: 360px;
    1212   height: 100px;
    1313}

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r238395 r238457  
     12018-11-23  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-grid] Implement Baseline Alignment for grid items
     4        https://bugs.webkit.org/show_bug.cgi?id=145566
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        Updated test expectations of severla tests, that are now passing with the new code.
     9
     10        * resources/import-expectations.json:
     11        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-001-expected.txt:
     12        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-002-expected.txt:
     13        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003-expected.txt:
     14        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004-expected.txt:
     15        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-005-expected.txt:
     16        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-006-expected.txt:
     17        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-007-expected.txt:
     18        * web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-008-expected.txt:
     19        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001-expected.txt:
     20        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002-expected.txt:
     21        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003-expected.txt:
     22        * web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004-expected.txt:
     23        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001-expected.txt:
     24        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002-expected.txt:
     25        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003-expected.txt:
     26        * web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004-expected.txt:
     27        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt:
     28        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002-expected.txt:
     29        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003-expected.txt:
     30        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html:
     31        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html:
     32        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html:
     33        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html:
     34        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html:
     35        * web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html:
     36        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-002-expected.txt:
     37        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002-expected.txt:
     38        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002-expected.txt:
     39        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-002-expected.txt:
     40        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002-expected.txt:
     41        * web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002-expected.txt:
     42
    1432018-11-20  Manuel Rego Casasnovas  <rego@igalia.com>
    244

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-001-expected.txt

    r238079 r238457  
    11
    2 FAIL .before 1 assert_equals:
    3 <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100" class=" before" data-offset-y="20"></div>
    4 offsetTop expected 20 but got 0
     2PASS .before 1
    53PASS .before 2
    6 FAIL .before 3 assert_equals:
    7 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="30"></div>
    8 offsetTop expected 30 but got 0
     4PASS .before 3
    95

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-002-expected.txt

    r238079 r238457  
    22PASS .before 1
    33PASS .before 2
    4 FAIL .before 3 assert_equals:
    5 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="10"></div>
    6 offsetTop expected 10 but got 0
     4PASS .before 3
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-003-expected.txt

    r238079 r238457  
    11
    2 FAIL .before 1 assert_equals:
    3 <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100" class=" before" data-offset-x="20"></div>
    4 offsetLeft expected 20 but got 0
     2PASS .before 1
    53PASS .before 2
    6 FAIL .before 3 assert_equals:
    7 <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="30"></div>
    8 offsetLeft expected 30 but got 0
     4PASS .before 3
    95

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-004-expected.txt

    r238079 r238457  
    22PASS .before 1
    33PASS .before 2
    4 FAIL .before 3 assert_equals:
    5 <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="10"></div>
    6 offsetLeft expected 10 but got 0
     4PASS .before 3
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-005-expected.txt

    r238079 r238457  
    33É
    44
    5 FAIL .before 1 assert_equals:
    6 <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100" class=" before" data-offset-y="8">É</div>
    7 offsetTop expected 8 but got 0
     5PASS .before 1
    86PASS .before 2
    9 FAIL .before 3 assert_equals:
    10 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="16">É</div>
    11 offsetTop expected 16 but got 0
     7PASS .before 3
    128

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-006-expected.txt

    r238079 r238457  
    55PASS .before 1
    66PASS .before 2
    7 FAIL .before 3 assert_equals:
    8 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0" class=" before" data-offset-y="8">É</div>
    9 offsetTop expected 8 but got 0
     7PASS .before 3
    108

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-007-expected.txt

    r238079 r238457  
    33É
    44
    5 FAIL .before 1 assert_equals:
    6 <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100" class=" before" data-offset-x="2">É</div>
    7 offsetLeft expected 2 but got 0
     5PASS .before 1
    86PASS .before 2
    9 FAIL .before 3 assert_equals:
    10 <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="4">É</div>
    11 offsetLeft expected 4 but got 0
     7PASS .before 3
    128

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-style-changes-008-expected.txt

    r238079 r238457  
    77FAIL .before 3 assert_equals:
    88<div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0" class=" before" data-offset-x="5">É</div>
    9 offsetLeft expected 5 but got 0
     9offsetLeft expected 5 but got 2
    1010

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001-expected.txt

    r232903 r238457  
    1212É É ÉÉ
    1313
    14 FAIL .grid 1 assert_equals:
    15 <div class="grid alignItemsBaseline verticalRL">
    16   <div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
    17   <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
    18   <div class="autoRowAutoColumnSpanning2 width25"></div>
    19 </div>
    20 offsetLeft expected 40 but got 175
    21 FAIL .grid 2 assert_equals:
    22 <div class="grid alignItemsBaseline verticalLR">
    23   <div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
    24   <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
    25   <div class="autoRowAutoColumnSpanning2 width25"></div>
    26 </div>
    27 offsetLeft expected 35 but got 0
    28 FAIL .grid 3 assert_equals:
    29 <div class="grid width300 alignItemsBaseline">
    30   <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
    31   <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    32   <div class="autoRowAutoColumnSpanning2 height25"></div>
    33 </div>
    34 offsetTop expected 160 but got 0
    35 FAIL .grid 4 assert_equals:
    36 <div class="grid width300 alignItemsBaseline">
    37   <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
    38   <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    39   <div class="autoRowAutoColumnSpanning2 height25"></div>
    40 </div>
    41 offsetTop expected 160 but got 0
     14PASS .grid 1
     15PASS .grid 2
     16PASS .grid 3
     17PASS .grid 4
    4218

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002-expected.txt

    r232903 r238457  
    66É É ÉÉ
    77
    8 FAIL .grid 1 assert_equals:
    9 <div class="grid alignItemsBaseline verticalRL">
    10   <div class="firstRowFirstColumn fixedWidth" data-offset-x="175" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    11   <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    12   <div class="autoRowAutoColumnSpanning2 width25"></div>
    13 </div>
    14 offsetLeft expected 115 but got 180
    15 FAIL .grid 2 assert_equals:
    16 <div class="grid alignItemsBaseline verticalLR">
    17   <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    18   <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    19   <div class="autoRowAutoColumnSpanning2 width25"></div>
    20 </div>
    21 offsetLeft expected 30 but got 0
    22 FAIL .grid 3 assert_equals:
    23 <div class="grid width300 alignItemsBaseline">
    24   <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    25   <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    26   <div class="autoRowAutoColumnSpanning2 height25"></div>
    27 </div>
    28 offsetTop expected 85 but got 0
     8PASS .grid 1
     9PASS .grid 2
     10PASS .grid 3
    2911

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003-expected.txt

    r232903 r238457  
    66É É ÉÉ
    77
    8 FAIL .grid 1 assert_equals:
    9 <div class="grid alignItemsBaseline verticalRL">
    10   <div class="firstRowFirstColumn relativeWidth" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    11   <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    12   <div class="autoRowAutoColumnSpanning2 width25"></div>
    13 </div>
    14 offsetLeft expected 140 but got 180
    15 FAIL .grid 2 assert_equals:
    16 <div class="grid alignItemsBaseline verticalLR">
    17   <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    18   <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    19   <div class="autoRowAutoColumnSpanning2 width25"></div>
    20 </div>
    21 offsetLeft expected 30 but got 0
    22 FAIL .grid 3 assert_equals:
    23 <div class="grid width300 alignItemsBaseline">
    24   <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    25   <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    26   <div class="autoRowAutoColumnSpanning2 height25"></div>
    27 </div>
    28 offsetTop expected 60 but got 0
     8PASS .grid 1
     9PASS .grid 2
     10PASS .grid 3
    2911

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004-expected.txt

    r232903 r238457  
    66É É ÉÉ
    77
    8 FAIL .grid 1 assert_equals:
    9 <div class="grid alignItemsBaseline verticalRL">
    10   <div class="firstRowFirstColumn fixedWidth" data-offset-x="85" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    11   <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    12   <div class="autoRowAutoColumnSpanning2 width25"></div>
    13 </div>
    14 offsetLeft expected 85 but got 25
    15 FAIL .grid 2 assert_equals:
    16 <div class="grid alignItemsBaseline verticalLR">
    17   <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    18   <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    19   <div class="autoRowAutoColumnSpanning2 width25"></div>
    20 </div>
    21 offsetLeft expected 30 but got 0
    22 FAIL .grid 3 assert_equals:
    23 <div class="grid width300 alignItemsBaseline">
    24   <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    25   <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    26   <div class="autoRowAutoColumnSpanning2 height25"></div>
    27 </div>
    28 offsetTop expected 85 but got 0
     8PASS .grid 1
     9PASS .grid 2
     10PASS .grid 3
    2911

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001-expected.txt

    r232903 r238457  
    1212É É ÉÉ
    1313
    14 FAIL .grid 1 assert_equals:
    15 <div class="grid justifyItemsBaseline verticalRL">
    16   <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
    17   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    18   <div class="autoRowSpanning2AutoColumn height25"></div>
    19 </div>
    20 offsetTop expected 160 but got 0
    21 FAIL .grid 2 assert_equals:
    22 <div class="grid justifyItemsBaseline verticalLR">
    23   <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
    24   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    25   <div class="autoRowSpanning2AutoColumn height25"></div>
    26 </div>
    27 offsetTop expected 160 but got 0
    28 FAIL .grid 3 assert_equals:
    29 <div class="grid width300 justifyItemsBaseline">
    30   <div class="firstRowFirstColumn" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
    31   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
    32   <div class="autoRowSpanning2AutoColumn width25"></div>
    33 </div>
    34 offsetLeft expected 35 but got 0
    35 FAIL .grid 4 assert_equals:
    36 <div class="grid width300 justifyItemsBaseline">
    37   <div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
    38   <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
    39   <div class="autoRowSpanning2AutoColumn width25"></div>
    40 </div>
    41 offsetLeft expected 60 but got 0
     14PASS .grid 1
     15PASS .grid 2
     16PASS .grid 3
     17PASS .grid 4
    4218

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002-expected.txt

    r232903 r238457  
    88É É ÉÉ
    99
    10 FAIL .grid 1 assert_equals:
    11 <div class="grid justifyItemsBaseline verticalRL">
    12   <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    13   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    14   <div class="autoRowSpanning2AutoColumn height25"></div>
    15 </div>
    16 offsetTop expected 85 but got 0
    17 FAIL .grid 2 assert_equals:
    18 <div class="grid justifyItemsBaseline verticalLR">
    19   <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    20   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    21   <div class="autoRowSpanning2AutoColumn height25"></div>
    22 </div>
    23 offsetTop expected 85 but got 0
    24 FAIL .grid 3 assert_equals:
    25 <div class="grid width300 justifyItemsBaseline">
    26   <div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    27   <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    28   <div class="autoRowSpanning2AutoColumn width25"></div>
    29 </div>
    30 offsetLeft expected 60 but got 0
    31 FAIL .grid 4 assert_equals:
    32 <div class="grid width300 justifyItemsBaseline">
    33   <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    34   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    35   <div class="autoRowSpanning2AutoColumn width25"></div>
    36 </div>
    37 offsetLeft expected 30 but got 0
     10PASS .grid 1
     11PASS .grid 2
     12PASS .grid 3
     13PASS .grid 4
    3814

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003-expected.txt

    r232903 r238457  
    88É É ÉÉ
    99
    10 FAIL .grid 1 assert_equals:
    11 <div class="grid justifyItemsBaseline verticalRL">
    12   <div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    13   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    14   <div class="autoRowSpanning2AutoColumn height25"></div>
    15 </div>
    16 offsetTop expected 60 but got 0
    17 FAIL .grid 2 assert_equals:
    18 <div class="grid justifyItemsBaseline verticalLR">
    19   <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    20   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    21   <div class="autoRowSpanning2AutoColumn height25"></div>
    22 </div>
    23 offsetTop expected 60 but got 0
    24 FAIL .grid 3 assert_equals:
    25 <div class="grid width300 justifyItemsBaseline">
    26   <div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    27   <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    28   <div class="autoRowSpanning2AutoColumn width25"></div>
    29 </div>
    30 offsetLeft expected 60 but got 0
    31 FAIL .grid 4 assert_equals:
    32 <div class="grid width300 justifyItemsBaseline">
    33   <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    34   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    35   <div class="autoRowSpanning2AutoColumn width25"></div>
    36 </div>
    37 offsetLeft expected 30 but got 0
     10PASS .grid 1
     11PASS .grid 2
     12PASS .grid 3
     13PASS .grid 4
    3814

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004-expected.txt

    r232903 r238457  
    88É É ÉÉ
    99
    10 FAIL .inline-grid 1 assert_equals:
    11 <div class="inline-grid justifyItemsBaseline verticalRL">
    12   <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    13   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    14   <div class="autoRowSpanning2AutoColumn height25"></div>
    15 </div>
    16 offsetTop expected 85 but got 0
    17 FAIL .inline-grid 2 assert_equals:
    18 <div class="inline-grid justifyItemsBaseline verticalLR">
    19   <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
    20   <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
    21   <div class="autoRowSpanning2AutoColumn height25"></div>
    22 </div>
    23 offsetTop expected 85 but got 0
    24 FAIL .inline-grid 3 assert_equals:
    25 <div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
    26   <div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    27   <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    28   <div class="autoRowSpanning2AutoColumn width25"></div>
    29 </div>
    30 width expected 210 but got 150
    31 FAIL .inline-grid 4 assert_equals:
    32 <div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
    33   <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
    34   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
    35   <div class="autoRowSpanning2AutoColumn width25"></div>
    36 </div>
    37 width expected 180 but got 150
     10PASS .inline-grid 1
     11PASS .inline-grid 2
     12PASS .inline-grid 3
     13PASS .inline-grid 4
    3814

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt

    r238079 r238457  
    1919baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.
    2020
    21 FAIL .inline-grid 1 assert_equals:
    22 <div class="inline-grid justifyItemsBaseline rows max-flex-columns">
    23         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    24         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    25         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    26     </div>
    27 offsetLeft expected -50 but got 0
    28 FAIL .inline-grid 2 assert_equals:
    29 <div class="inline-grid justifyItemsBaseline rows flex-columns">
    30         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    31         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    32         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    33     </div>
    34 width expected 100 but got 300
    35 FAIL .inline-grid 3 assert_equals:
    36 <div class="inline-grid justifyItemsBaseline rows fit-content-columns">
    37         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    38         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    39         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    40     </div>
    41 width expected 160 but got 420
    42 FAIL .inline-grid 4 assert_equals:
    43 <div class="inline-grid justifyItemsBaseline rows max-content-columns">
    44         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    45         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    46         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    47     </div>
    48 width expected 160 but got 420
    49 FAIL .inline-grid 5 assert_equals:
    50 <div class="inline-grid justifyItemsBaseline rows min-content-columns">
    51         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    52         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    53         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    54     </div>
    55 width expected 160 but got 420
    56 FAIL .inline-grid 6 assert_equals:
    57 <div class="inline-grid justifyItemsBaseline rows">
    58         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    59         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    60         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    61     </div>
    62 width expected 100 but got 300
     21PASS .inline-grid 1
     22PASS .inline-grid 2
     23PASS .inline-grid 3
     24PASS .inline-grid 4
     25PASS .inline-grid 5
     26PASS .inline-grid 6
    6327PASS .inline-grid 7
    6428PASS .inline-grid 8

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002-expected.txt

    r238079 r238457  
    7676ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É
    7777
    78 FAIL .inline-grid 1 assert_equals:
    79 <div class="inline-grid verticalRL alignItemsBaseline columns max-flex-rows">
    80   <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
    81   <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    82   <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    83 </div>
    84 offsetLeft expected -10 but got 366
     78PASS .inline-grid 1
    8579PASS .inline-grid 2
    8680PASS .inline-grid 3
    … …  
    8882PASS .inline-grid 5
    8983PASS .inline-grid 6
    90 FAIL .inline-grid 7 assert_equals:
    91 <div class="inline-grid verticalLR alignItemsBaseline columns max-flex-rows">
    92   <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
    93   <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    94   <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    95 </div>
    96 offsetLeft expected 35 but got 0
     84PASS .inline-grid 7
    9785PASS .inline-grid 8
    9886PASS .inline-grid 9
    … …  
    10088PASS .inline-grid 11
    10189PASS .inline-grid 12
    102 FAIL .inline-grid 13 assert_equals:
    103 <div class="inline-grid justifyItemsBaseline rows max-flex-columns">
    104   <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
    105   <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    106   <div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    107 </div>
    108 offsetLeft expected 35 but got 0
     90PASS .inline-grid 13
    10991PASS .inline-grid 14
    11092PASS .inline-grid 15
    … …  
    11294PASS .inline-grid 17
    11395PASS .inline-grid 18
    114 FAIL .inline-grid 19 assert_equals:
    115 <div class="inline-grid alignItemsBaseline columns max-flex-rows">
    116   <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="376" data-expected-width="100" data-expected-height="75">É</div>
    117   <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    118   <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
    119 </div>
    120 offsetTop expected 376 but got 0
     96PASS .inline-grid 19
    12197PASS .inline-grid 20
    12298PASS .inline-grid 21

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003-expected.txt

    r238079 r238457  
    2020É
    2121
    22 FAIL .grid 1 assert_equals:
    23 <div class="grid column justifyItemsBaseline">
    24   <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
    25   <div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
    26   <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
    27 </div>
    28 offsetLeft expected 16 but got 0
    29 FAIL .grid 2 assert_equals:
    30 <div class="grid column justifyItemsBaseline">
    31   <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
    32   <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
    33   <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
    34 </div>
    35 offsetLeft expected 16 but got 0
    36 FAIL .grid 3 assert_equals:
    37 <div class="grid column justifyItemsBaseline">
    38   <div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="50">É</div>
    39   <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
    40   <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
    41 </div>
    42 offsetLeft expected 16 but got 0
    43 FAIL .grid 4 assert_equals:
    44 <div class="grid row alignItemsBaseline">
    45   <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="24" data-expected-width="50" data-expected-height="40"></div>
    46   <div class="item2 verticalLR" data-offset-x="50" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
    47   <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
    48 </div>
    49 offsetTop expected 24 but got 0
    50 FAIL .grid 5 assert_equals:
    51 <div class="grid row alignItemsBaseline ">
    52   <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
    53   <div class="item2" data-offset-x="50" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
    54   <div class="item3 verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
    55 </div>
    56 offsetTop expected 40 but got 0
    57 FAIL .grid 6 assert_equals:
    58 <div class="grid row alignItemsBaseline">
    59   <div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="50" data-expected-height="30">É</div>
    60   <div class="item2" data-offset-x="50" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
    61   <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
    62 </div>
    63 offsetTop expected 34 but got 0
     22PASS .grid 1
     23PASS .grid 2
     24PASS .grid 3
     25PASS .grid 4
     26PASS .grid 5
     27PASS .grid 6
    6428

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html

    r225561 r238457  
    2929  grid-auto-columns: 50px;
    3030  align-items: baseline;
    31   align-content: space-evenly;
     31  align-content: space-between;
     32  -webkit-text-orientation: sideways;
    3233}
    3334.firstRowFirstColumn {
    … …  
    4647<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4748<div class="block">
    48   <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div>
    49   <div style="top: 73px; left: 0px;">XX X</div>
    50   <div style="top: 17px; left: 50px" class="big">X</div>
     49  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div>
     50  <div style="top: 70px; left: 0px;">XX X</div>
     51  <div style="top: 80px; left: 0px;">X XX</div>
     52  <div style="top: 90px; left: 0px;">X</div>
     53  <div style="top: 0px; left: 50px" class="big">X</div>
    5154</div>
    5255<div class="grid">
    5356  <div class="firstRowFirstColumn">XX XXXX XX</div>
    5457  <div class="firstRowSecondColumn big">X</div>
    55   <div class="secondRowFirstColumn">XX X</div>
     58  <div class="secondRowFirstColumn">XX X X XX X</div>
    5659</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html

    r225561 r238457  
    1414  position: absolute;
    1515  z-index: -1;
    16   background: green;
    1716  width: 100px;
    1817  height: 100px;
     18  background: green;
    1919}
    2020.block > div {
    … …  
    3030  justify-items: baseline;
    3131  justify-content: start;
     32  -webkit-text-orientation: sideways;
    3233}
    3334.grid > div { writing-mode: vertical-lr; }
    … …  
    4748<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4849<div class="block">
    49   <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
    50   <div style="top: 20px; left: 15px;">X</div>
    51   <div style="top: 30px; left: 15px;">X X</div>
     50  <div style="top: 0px; left: 2px;">XXXX<br>XXXX</div>
     51  <div style="top: 20px; left: 12px;">X</div>
     52  <div style="top: 30px; left: 12px;">X X</div>
    5253  <div style="top: 50px; left: 0px" class="big">X</div>
    5354</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html

    r225561 r238457  
    2929  grid-auto-rows: 50px;
    3030  justify-items: baseline;
    31   justify-content: space-evenly;
     31  justify-content: space-between;
     32  -webkit-text-orientation: sideways;
    3233}
    3334.grid > div { writing-mode: vertical-lr; }
     35.block > div { writing-mode: vertical-lr; }
    3436.firstRowFirstColumn {
    3537  grid-row: 1;
    … …  
    4749<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4850<div class="block">
    49   <div style="top: 0px; left: 23px;">XXX<br>XXX</div>
    50   <div style="top: 0px; left: 72px;">X</div>
    51   <div style="top: 10px; left: 72px;">X</div>
    52   <div style="top: 20px; left: 33px;">X</div>
    53   <div style="top: 30px; left: 33px;">X</div>
    54   <div style="top: 30px; left: 72px;">X</div>
    55   <div style="top: 50px; left: 18px" class="big">X</div>
     51  <div style="top: 0px; left: 2px;">XX<br>XXXX<br>XX</div>
     52  <div style="top: 0px; left: 70px;">XX X</div>
     53  <div style="top: 0px; left: 80px;">X XX</div>
     54  <div style="top: 0px; left: 90px;">X</div>
     55  <div style="top: 50px; left: 0px" class="big">X</div>
    5656</div>
    5757<div class="grid">
    5858  <div class="firstRowFirstColumn">XX XXXX XX</div>
    5959  <div class="secondRowFirstColumn big">X</div>
    60   <div class="firstRowSecondColumn">XX X</div>
     60  <div class="firstRowSecondColumn">XX X X XX X</div>
    6161</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html

    r225561 r238457  
    3030  justify-items: baseline;
    3131  justify-content: start;
     32  -webkit-text-orientation: sideways;
    3233}
    3334.grid > div { writing-mode: vertical-lr; }
    … …  
    4748<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4849<div class="block">
    49   <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
    50   <div style="top: 0px; left: 50px;">X</div>
    51   <div style="top: 10px; left: 50px;">X</div>
    52   <div style="top: 30px; left: 50px;">X</div>
     50  <div style="top: 0px; left: 4px; width: 40px; background: red; height: 40px;"></div>
     51  <div style="top: 0px; left: 44px;">X</div>
     52  <div style="top: 10px; left: 44px;">X</div>
     53  <div style="top: 30px; left: 44px;">X</div>
    5354  <div style="top: 50px; left: 0px" class="big">X</div>
    5455</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html

    r225561 r238457  
    2828  justify-items: baseline;
    2929  justify-content: start;
     30  text-orientation: sideways;
    3031}
    3132.grid > div { writing-mode: vertical-lr; }
    … …  
    4647<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4748<div class="block">
    48   <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
    49   <div style="top: 20px; left: 15px;">X</div>
    50   <div style="top: 30px; left: 15px;">X X</div>
     49  <div style="top: 0px; left: 2px;">XXXX<br>XXXX</div>
     50  <div style="top: 20px; left: 12px;">X</div>
     51  <div style="top: 30px; left: 12px;">X X</div>
    5152  <div style="top: 50px; left: 0px" class="big">X</div>
    5253</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html

    r225561 r238457  
    4545<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4646<div class="block">
    47   <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
    48   <div style="top: 0px; left: 55px;">X</div>
    49   <div style="top: 10px; left: 55px;">X</div>
    50   <div style="top: 20px; left: 15px;">X</div>
    51   <div style="top: 30px; left: 15px;">X</div>
    52   <div style="top: 30px; left: 55px;">X</div>
     47  <div style="top: 0px; left: 2px;">XXX<br>XXX</div>
     48  <div style="top: 0px; left: 52px;">X</div>
     49  <div style="top: 10px; left: 52px;">X</div>
     50  <div style="top: 20px; left: 12px;">X</div>
     51  <div style="top: 30px; left: 12px;">X</div>
     52  <div style="top: 30px; left: 52px;">X</div>
    5353  <div style="top: 50px; left: 0px" class="big">X</div>
    5454</div>

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html

    r225561 r238457  
    2828  justify-items: baseline;
    2929  justify-content: start;
     30  -webkit-text-orientation: sideways;
    3031}
    3132.grid > div { writing-mode: vertical-lr; }
    … …  
    4546<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    4647<div class="block">
    47   <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
    48   <div style="top: 0px; left: 50px;">X</div>
    49   <div style="top: 10px; left: 50px;">X</div>
    50   <div style="top: 30px; left: 50px;">X</div>
    51   <div style="top: 50px; left: 0px;">X</div>
     48  <div style="top: 0px; left: 4px; width: 40px; background: red; height: 40px;"></div>
     49  <div style="top: 0px; left: 44px;">X</div>
     50  <div style="top: 10px; left: 44px;">X</div>
     51  <div style="top: 30px; left: 44px;">X</div>
     52  <div style="top: 50px; left: 0px;" class="big">X</div>
    5253</div>
    5354<div class="grid">

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-002-expected.txt

    r232903 r238457  
    22PASS .grid 1
    33PASS .grid 2
    4 FAIL .grid 3 assert_equals:
    5 <div class="grid directionRTL">
    6   <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
    7   <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    8 </div>
    9 offsetLeft expected 440 but got 365
    10 FAIL .grid 4 assert_equals:
    11 <div class="grid directionRTL">
    12   <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
    13   <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    14 </div>
    15 margin-left expected "50" but got "125"
     4PASS .grid 3
     5PASS .grid 4
    166PASS .grid 5
    177PASS .grid 6
    18 FAIL .grid 7 assert_equals:
    19 <div class="grid">
    20   <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
    21   <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    22 </div>
    23 margin-right expected "50" but got "125"
    24 FAIL .grid 8 assert_equals:
    25 <div class="grid">
    26   <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
    27   <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    28 </div>
    29 offsetLeft expected 50 but got 125
     8PASS .grid 7
     9PASS .grid 8
    3010Direction LTR
    3111

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002-expected.txt

    r232903 r238457  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="grid directionRTL">
    4   <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
    5   <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    6 </div>
    7 offsetTop expected 440 but got 365
    8 FAIL .grid 2 assert_equals:
    9 <div class="grid directionRTL">
    10   <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
    11   <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    12 </div>
    13 margin-top expected "50" but got "125"
     2PASS .grid 1
     3PASS .grid 2
    144PASS .grid 3
    155PASS .grid 4
    16 FAIL .grid 5 assert_equals:
    17 <div class="grid">
    18   <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
    19   <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    20 </div>
    21 margin-bottom expected "50" but got "125"
    22 FAIL .grid 6 assert_equals:
    23 <div class="grid">
    24   <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
    25   <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    26 </div>
    27 offsetTop expected 50 but got 125
     6PASS .grid 5
     7PASS .grid 6
    288PASS .grid 7
    299PASS .grid 8

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002-expected.txt

    r232903 r238457  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="grid directionRTL">
    4   <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
    5   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    6 </div>
    7 margin-bottom expected "50" but got "125"
    8 FAIL .grid 2 assert_equals:
    9 <div class="grid directionRTL">
    10   <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
    11   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    12 </div>
    13 margin-top expected "50" but got "125"
     2PASS .grid 1
     3PASS .grid 2
    144PASS .grid 3
    155PASS .grid 4
    16 FAIL .grid 5 assert_equals:
    17 <div class="grid">
    18   <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
    19   <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    20 </div>
    21 margin-bottom expected "50" but got "125"
    22 FAIL .grid 6 assert_equals:
    23 <div class="grid">
    24   <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
    25   <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    26 </div>
    27 offsetTop expected 50 but got 125
     6PASS .grid 5
     7PASS .grid 6
    288PASS .grid 7
    299PASS .grid 8

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-002-expected.txt

    r232903 r238457  
    77  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    88</div>
    9 width expected 60 but got 260
     9width expected 60 but got 50
    1010FAIL .grid 4 assert_equals:
    1111<div class="grid directionRTL">
    … …  
    1313  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    1414</div>
    15 width expected 60 but got 260
     15width expected 60 but got 50
    1616PASS .grid 5
    1717PASS .grid 6
    … …  
    2121  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    2222</div>
    23 width expected 60 but got 260
     23width expected 60 but got 50
    2424FAIL .grid 8 assert_equals:
    2525<div class="grid">
    … …  
    2727  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
    2828</div>
    29 width expected 60 but got 260
     29width expected 60 but got 50
    3030Direction LTR
    3131

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002-expected.txt

    r232903 r238457  
    55  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    66</div>
    7 height expected 60 but got 260
     7height expected 60 but got 50
    88FAIL .grid 2 assert_equals:
    99<div class="grid directionRTL">
    … …  
    1111  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    1212</div>
    13 height expected 60 but got 260
     13height expected 60 but got 50
    1414PASS .grid 3
    1515PASS .grid 4
    … …  
    1919  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    2020</div>
    21 height expected 60 but got 260
     21height expected 60 but got 50
    2222FAIL .grid 6 assert_equals:
    2323<div class="grid">
    … …  
    2525  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    2626</div>
    27 height expected 60 but got 260
     27height expected 60 but got 50
    2828PASS .grid 7
    2929PASS .grid 8

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002-expected.txt

    r232903 r238457  
    55  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    66</div>
    7 height expected 60 but got 260
     7height expected 60 but got 50
    88FAIL .grid 2 assert_equals:
    99<div class="grid directionRTL">
    … …  
    1111  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
    1212</div>
    13 height expected 60 but got 260
     13height expected 60 but got 50
    1414PASS .grid 3
    1515PASS .grid 4
    … …  
    1919  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    2020</div>
    21 height expected 60 but got 260
     21height expected 60 but got 50
    2222FAIL .grid 6 assert_equals:
    2323<div class="grid">
    … …  
    2525  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
    2626</div>
    27 height expected 60 but got 260
     27height expected 60 but got 50
    2828PASS .grid 7
    2929PASS .grid 8

  • trunk/LayoutTests/platform/ios-simulator/TestExpectations

    r236236 r238457  
    9595imported/w3c/web-platform-tests/service-workers/service-worker/fetch-canvas-tainting-cache.https.html [ Pass Failure ]
    9696
     97# Baseline Alignment tests affected by 1px diff failures only on Mac and iOS platforms
     98webkit.org/b/170293 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
     99webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-two-dimensional.html [ Failure ]
     100webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-03.html [ ImageOnlyFailure ]
     101webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-04.html [ ImageOnlyFailure ]
     102webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ ImageOnlyFailure ]
     103webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ ImageOnlyFailure ]
     104webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-06.html [ ImageOnlyFailure ]
     105webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-07.html [ ImageOnlyFailure ]
     106
     107
    97108# A sub-test in this test is extremely flaky and fails most of the time, messing up partial-failure expectations
    98109webkit.org/b/189686 webgl/2.0.0/conformance2/renderbuffers/multisampled-renderbuffer-initialization.html [ Skip ]

  • trunk/LayoutTests/platform/mac/TestExpectations

    r238071 r238457  
    589589webkit.org/b/112176 fast/canvas/canvas-composite-alpha.html [ Failure Pass ]
    590590webkit.org/b/112176 fast/canvas/webgl/read-pixels-test.html [ Failure Pass ]
     591
     592# Baseline Alignment tests affected by 1px diff failures only on Mac and iOS platforms
     593webkit.org/b/170293 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
     594webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-03.html [ ImageOnlyFailure ]
     595webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-04.html [ ImageOnlyFailure ]
     596webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ ImageOnlyFailure ]
     597webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ ImageOnlyFailure ]
     598webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-06.html [ ImageOnlyFailure ]
     599webkit.org/b/170293 fast/css-grid-layout/grid-self-baseline-07.html [ ImageOnlyFailure ]
    591600
    592601# The following ref-test appears to fail on EWS bots as well.

  • trunk/Source/WebCore/ChangeLog

    r238454 r238457  
     12018-11-23  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-grid] Implement Baseline Alignment for grid items
     4        https://bugs.webkit.org/show_bug.cgi?id=145566
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        This patch impements the Baseline Self-Alignment feature for grid items according to
     9        the CSS Box Alignment specification [1].
     10
     11        This new layout logic is handled by the Self-Alignment (justify-self and align-self)
     12        and Default-Alignment (justify-items and align-items) CSS properties.
     13
     14        This feature allows users to align the grid items sharing a Baseline Alignment Context,
     15        either row or column contexts, based on their respective baselines.
     16
     17        [1] https://drafts.csswg.org/css-align-3/#baseline-align-self
     18
     19        Tests: fast/css-grid-layout/grid-self-baseline-and-flex-tracks-with-indefinite-container-crash.html
     20               fast/css-grid-layout/grid-self-baseline-and-flexible-tracks-should-not-crash.html
     21               fast/css-grid-layout/grid-self-baseline-and-item-relayout-should-not-crash.html
     22               fast/css-grid-layout/grid-self-baseline-and-relative-sized-items-crash.html
     23               fast/css-grid-layout/grid-self-baseline-and-relative-sized-tracks-crash.html
     24               fast/css-grid-layout/grid-self-baseline-followed-by-item-style-change-should-not-crash.html
     25
     26        * Sources.txt:
     27        * rendering/GridBaselineAlignment.cpp: Added.
     28        (WebCore::GridBaselineAlignment::marginOverForChild const):
     29        (WebCore::GridBaselineAlignment::marginUnderForChild const):
     30        (WebCore::GridBaselineAlignment::logicalAscentForChild const):
     31        (WebCore::GridBaselineAlignment::ascentForChild const):
     32        (WebCore::GridBaselineAlignment::descentForChild const):
     33        (WebCore::GridBaselineAlignment::isDescentBaselineForChild const):
     34        (WebCore::GridBaselineAlignment::isHorizontalBaselineAxis const):
     35        (WebCore::GridBaselineAlignment::isOrthogonalChildForBaseline const):
     36        (WebCore::GridBaselineAlignment::isParallelToBaselineAxisForChild const):
     37        (WebCore::GridBaselineAlignment::baselineGroupForChild const):
     38        (WebCore::GridBaselineAlignment::updateBaselineAlignmentContext):
     39        (WebCore::GridBaselineAlignment::baselineOffsetForChild const):
     40        (WebCore::GridBaselineAlignment::clear):
     41        (WebCore::BaselineGroup::BaselineGroup):
     42        (WebCore::BaselineGroup::update):
     43        (WebCore::BaselineGroup::isOppositeBlockFlow const):
     44        (WebCore::BaselineGroup::isOrthogonalBlockFlow const):
     45        (WebCore::BaselineGroup::isCompatible const):
     46        (WebCore::BaselineContext::BaselineContext):
     47        (WebCore::BaselineContext::sharedGroup const):
     48        (WebCore::BaselineContext::updateSharedGroup):
     49        (WebCore::BaselineContext::findCompatibleSharedGroup):
     50        * rendering/GridBaselineAlignment.h: Added.
     51        (WebCore::BaselineGroup::maxAscent const):
     52        (WebCore::BaselineGroup::maxDescent const):
     53        (WebCore::BaselineGroup::size const):
     54        (WebCore::isBaselinePosition):
     55        (WebCore::GridBaselineAlignment::setBlockFlow):
     56        * rendering/GridLayoutFunctions.h:
     57        * rendering/GridTrackSizingAlgorithm.cpp:
     58        (WebCore::gridAxisForDirection):
     59        (WebCore::gridDirectionForAxis):
     60        (WebCore::GridTrackSizingAlgorithm::availableSpace const):
     61        (WebCore::GridTrackSizingAlgorithm::isIntrinsicSizedGridArea const):
     62        (WebCore::GridTrackSizingAlgorithmStrategy::logicalHeightForChild const):
     63        (WebCore::GridTrackSizingAlgorithmStrategy::minContentForChild const):
     64        (WebCore::GridTrackSizingAlgorithmStrategy::maxContentForChild const):
     65        (WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
     66        (WebCore::GridTrackSizingAlgorithm::canParticipateInBaselineAlignment const):
     67        (WebCore::GridTrackSizingAlgorithm::participateInBaselineAlignment const):
     68        (WebCore::GridTrackSizingAlgorithm::updateBaselineAlignmentContext):
     69        (WebCore::GridTrackSizingAlgorithm::baselineOffsetForChild const):
     70        (WebCore::GridTrackSizingAlgorithm::clearBaselineItemsCache):
     71        (WebCore::GridTrackSizingAlgorithm::cacheBaselineAlignedItem):
     72        (WebCore::GridTrackSizingAlgorithm::copyBaselineItemsCache):
     73        (WebCore::GridTrackSizingAlgorithm::setup):
     74        (WebCore::GridTrackSizingAlgorithm::computeBaselineAlignmentContext):
     75        * rendering/GridTrackSizingAlgorithm.h:
     76        * rendering/RenderBlockFlow.cpp:
     77        (WebCore::RenderBlockFlow::firstLineBaseline const):
     78        * rendering/RenderGrid.cpp:
     79        (WebCore::RenderGrid::layoutBlock):
     80        (WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
     81        (WebCore::RenderGrid::placeItemsOnGrid const):
     82        (WebCore::RenderGrid::performGridItemsPreLayout const):
     83        (WebCore::synthesizedBaselineFromMarginBox):
     84        (WebCore::RenderGrid::isBaselineAlignmentForChild const):
     85        (WebCore::RenderGrid::baselinePosition const):
     86        (WebCore::RenderGrid::firstLineBaseline const):
     87        (WebCore::RenderGrid::inlineBlockBaseline const):
     88        (WebCore::RenderGrid::columnAxisBaselineOffsetForChild const):
     89        (WebCore::RenderGrid::rowAxisBaselineOffsetForChild const):
     90        (WebCore::RenderGrid::columnAxisOffsetForChild const):
     91        (WebCore::RenderGrid::rowAxisOffsetForChild const):
     92        * rendering/RenderGrid.h:
     93
    1942018-11-22  Wenson Hsieh  <wenson_hsieh@apple.com>
    295

  • trunk/Source/WebCore/Sources.txt

    r238451 r238457  
    19001900rendering/FloatingObjects.cpp
    19011901rendering/Grid.cpp
     1902rendering/GridBaselineAlignment.cpp
    19021903rendering/GridLayoutFunctions.cpp
    19031904rendering/GridTrackSizingAlgorithm.cpp

  • trunk/Source/WebCore/rendering/GridLayoutFunctions.h

    r225805 r238457  
    3131namespace WebCore {
    3232
     33enum GridAxis { GridRowAxis, GridColumnAxis };
     34
    3335namespace GridLayoutFunctions {
    3436

  • trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp

    r238359 r238457  
    9292// Static helper methods.
    9393
     94static GridAxis gridAxisForDirection(GridTrackSizingDirection direction)
     95{
     96    return direction == ForColumns ? GridRowAxis : GridColumnAxis;
     97}
     98
     99static GridTrackSizingDirection gridDirectionForAxis(GridAxis axis)
     100{
     101    return axis == GridRowAxis ? ForColumns : ForRows;
     102}
     103
    94104static bool shouldClearOverrideContainingBlockContentSizeForChild(const RenderBox& child, GridTrackSizingDirection direction)
    95105{
    … …  
    131141    else
    132142        m_freeSpaceRows = freeSpace;
     143}
     144
     145std::optional<LayoutUnit> GridTrackSizingAlgorithm::availableSpace() const
     146{
     147    ASSERT(wasSetup());
     148    return availableSpace(m_direction);
    133149}
    134150
    … …  
    600616}
    601617
     618bool GridTrackSizingAlgorithm::isIntrinsicSizedGridArea(const RenderBox& child, GridAxis axis) const
     619{
     620    ASSERT(wasSetup());
     621    GridTrackSizingDirection direction = gridDirectionForAxis(axis);
     622    const GridSpan& span = m_grid.gridItemSpan(child, direction);
     623    for (auto trackPosition : span) {
     624        GridTrackSize trackSize = rawGridTrackSize(direction, trackPosition);
     625        // We consider fr units as 'auto' for the min sizing function.
     626        // FIXME(jfernandez): https://github.com/w3c/csswg-drafts/issues/2611
     627        //
     628        // The use of AvailableSize function may imply different results
     629        // for the same item when assuming indefinite or definite size
     630        // constraints depending on the phase we evaluate the item's
     631        // baseline participation.
     632        // FIXME(jfernandez): https://github.com/w3c/csswg-drafts/issues/3046
     633        if (trackSize.isContentSized() || trackSize.isFitContent() || trackSize.minTrackBreadth().isFlex() || (trackSize.maxTrackBreadth().isFlex() && !availableSpace(direction)))
     634            return true;
     635    }
     636    return false;
     637}
     638
    602639GridTrackSize GridTrackSizingAlgorithm::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
    603640{
    … …  
    728765
    729766    child.layoutIfNeeded();
    730     return child.logicalHeight() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childBlockDirection, child);
     767    return child.logicalHeight() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childBlockDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
    731768}
    732769
    … …  
    737774        // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
    738775        // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
    739         return child.minPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child);
     776        return child.minPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
    740777    }
    741778
    … …  
    751788        // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
    752789        // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
    753         return child.maxPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child);
     790        return child.maxPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
    754791    }
    755792
    … …  
    787824        return minContentForChild(child);
    788825
     826    LayoutUnit baselineShim = m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
    789827    LayoutUnit gridAreaSize = m_algorithm.gridAreaBreadthForChild(child, childInlineDirection);
    790828    if (isRowAxis)
    791         return minLogicalWidthForChild(child, childMinSize, gridAreaSize);
     829        return minLogicalWidthForChild(child, childMinSize, gridAreaSize) + baselineShim;
    792830
    793831    bool overrideSizeHasChanged = updateOverrideContainingBlockContentSizeForChild(child, childInlineDirection, gridAreaSize);
    794832    layoutGridItemForMinSizeComputation(child, overrideSizeHasChanged);
    795833
    796     return child.computeLogicalHeightUsing(MinSize, childMinSize, std::nullopt).value_or(0) + child.marginLogicalHeight() + child.scrollbarLogicalHeight();
     834    return child.computeLogicalHeightUsing(MinSize, childMinSize, std::nullopt).value_or(0) + child.marginLogicalHeight() + child.scrollbarLogicalHeight() + baselineShim;
     835}
     836
     837bool GridTrackSizingAlgorithm::canParticipateInBaselineAlignment(const RenderBox& child, GridAxis baselineAxis) const
     838{
     839    ASSERT(baselineAxis == GridColumnAxis ? m_columnBaselineItemsMap.contains(&child) : m_rowBaselineItemsMap.contains(&child));
     840
     841    // Baseline cyclic dependencies only happen with synthesized
     842    // baselines. These cases include orthogonal or empty grid items
     843    // and replaced elements.
     844    bool isParallelToBaselineAxis = baselineAxis == GridColumnAxis ? !GridLayoutFunctions::isOrthogonalChild(*m_renderGrid, child) : GridLayoutFunctions::isOrthogonalChild(*m_renderGrid, child);
     845    if (isParallelToBaselineAxis && child.firstLineBaseline())
     846        return true;
     847
     848    // Baseline cyclic dependencies only happen in grid areas with
     849    // intrinsically-sized tracks.
     850    if (!isIntrinsicSizedGridArea(child, baselineAxis))
     851        return true;
     852
     853    return isParallelToBaselineAxis ? !child.hasRelativeLogicalHeight() : !child.hasRelativeLogicalWidth() && !child.style().logicalWidth().isAuto();
     854}
     855
     856bool GridTrackSizingAlgorithm::participateInBaselineAlignment(const RenderBox& child, GridAxis baselineAxis) const
     857{
     858    return baselineAxis == GridColumnAxis ? m_columnBaselineItemsMap.get(&child) : m_rowBaselineItemsMap.get(&child);
     859}
     860
     861void GridTrackSizingAlgorithm::updateBaselineAlignmentContext(const RenderBox& child, GridAxis baselineAxis)
     862{
     863    ASSERT(wasSetup());
     864    ASSERT(canParticipateInBaselineAlignment(child, baselineAxis));
     865    ASSERT(!child.needsLayout());
     866
     867    ItemPosition align = m_renderGrid->selfAlignmentForChild(baselineAxis, child).position();
     868    const auto& span = m_grid.gridItemSpan(child, gridDirectionForAxis(baselineAxis));
     869    m_baselineAlignment.updateBaselineAlignmentContext(align, span.startLine(), child, baselineAxis);
     870}
     871
     872LayoutUnit GridTrackSizingAlgorithm::baselineOffsetForChild(const RenderBox& child, GridAxis baselineAxis) const
     873{
     874    if (!participateInBaselineAlignment(child, baselineAxis))
     875        return LayoutUnit();
     876
     877    ItemPosition align = m_renderGrid->selfAlignmentForChild(baselineAxis, child).position();
     878    const auto& span = m_grid.gridItemSpan(child, gridDirectionForAxis(baselineAxis));
     879    return m_baselineAlignment.baselineOffsetForChild(align, span.startLine(), child, baselineAxis);
     880}
     881
     882void GridTrackSizingAlgorithm::clearBaselineItemsCache()
     883{
     884    m_columnBaselineItemsMap.clear();
     885    m_rowBaselineItemsMap.clear();
     886}
     887
     888void GridTrackSizingAlgorithm::cacheBaselineAlignedItem(const RenderBox& item, GridAxis axis)
     889{
     890    ASSERT(m_renderGrid->isBaselineAlignmentForChild(item, axis));
     891    if (axis == GridColumnAxis)
     892        m_columnBaselineItemsMap.add(&item, true);
     893    else
     894        m_rowBaselineItemsMap.add(&item, true);
     895}
     896
     897void GridTrackSizingAlgorithm::copyBaselineItemsCache(const GridTrackSizingAlgorithm& source, GridAxis axis)
     898{
     899    if (axis == GridColumnAxis)
     900        m_columnBaselineItemsMap = source.m_columnBaselineItemsMap;
     901    else
     902        m_rowBaselineItemsMap = source.m_rowBaselineItemsMap;
    797903}
    798904
    … …  
    11751281    m_needsSetup = false;
    11761282    m_hasPercentSizedRowsIndefiniteHeight = false;
     1283
     1284    computeBaselineAlignmentContext();
     1285}
     1286
     1287void GridTrackSizingAlgorithm::computeBaselineAlignmentContext()
     1288{
     1289    GridAxis axis = gridAxisForDirection(m_direction);
     1290    m_baselineAlignment.clear(axis);
     1291    m_baselineAlignment.setBlockFlow(m_renderGrid->style().writingMode());
     1292    BaselineItemsCache& baselineItemsCache = axis == GridColumnAxis ? m_columnBaselineItemsMap : m_rowBaselineItemsMap;
     1293    BaselineItemsCache tmpBaselineItemsCache = baselineItemsCache;
     1294    for (auto* child : tmpBaselineItemsCache.keys()) {
     1295        // FIXME (jfernandez): We may have to get rid of the baseline participation
     1296        // flag (hence just using a HashSet) depending on the CSS WG resolution on
     1297        // https://github.com/w3c/csswg-drafts/issues/3046
     1298        if (canParticipateInBaselineAlignment(*child, axis)) {
     1299            updateBaselineAlignmentContext(*child, axis);
     1300            baselineItemsCache.set(child, true);
     1301        } else
     1302            baselineItemsCache.set(child, false);
     1303    }
    11771304}
    11781305

  • trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.h

    r238114 r238457  
    2626
    2727#include "Grid.h"
     28#include "GridBaselineAlignment.h"
    2829#include "GridTrackSize.h"
    2930#include "LayoutUnit.h"
    … …  
    111112
    112113    LayoutSize estimatedGridAreaBreadthForChild(const RenderBox&) const;
     114    LayoutUnit baselineOffsetForChild(const RenderBox&, GridAxis) const;
     115
     116    void cacheBaselineAlignedItem(const RenderBox&, GridAxis);
     117    void copyBaselineItemsCache(const GridTrackSizingAlgorithm&, GridAxis);
     118    void clearBaselineItemsCache();
    113119
    114120    Vector<GridTrack>& tracks(GridTrackSizingDirection direction) { return direction == ForColumns ? m_columns : m_rows; }
    … …  
    130136
    131137private:
    132     std::optional<LayoutUnit> availableSpace() const { return availableSpace(m_direction); }
     138    std::optional<LayoutUnit> availableSpace() const;
    133139    bool isRelativeGridLengthAsAuto(const GridLength&, GridTrackSizingDirection) const;
    134140    GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned translatedIndex) const;
    … …  
    149155    LayoutUnit gridAreaBreadthForChild(const RenderBox&, GridTrackSizingDirection) const;
    150156
     157    void computeBaselineAlignmentContext();
     158    void updateBaselineAlignmentContext(const RenderBox&, GridAxis);
     159    bool canParticipateInBaselineAlignment(const RenderBox&, GridAxis) const;
     160    bool participateInBaselineAlignment(const RenderBox&, GridAxis) const;
     161
     162    bool isIntrinsicSizedGridArea(const RenderBox&, GridAxis) const;
    151163    void computeGridContainerIntrinsicSizes();
    152164
    … …  
    210222    };
    211223    SizingState m_sizingState;
     224
     225    GridBaselineAlignment m_baselineAlignment;
     226    typedef HashMap<const RenderBox*, bool> BaselineItemsCache;
     227    BaselineItemsCache m_columnBaselineItemsMap;
     228    BaselineItemsCache m_rowBaselineItemsMap;
    212229
    213230    // This is a RAII class used to ensure that the track sizing algorithm is

  • trunk/Source/WebCore/rendering/RenderBlockFlow.cpp

    r238441 r238457  
    30013001std::optional<int> RenderBlockFlow::firstLineBaseline() const
    30023002{
    3003     if (isWritingModeRoot() && !isRubyRun())
     3003    if (isWritingModeRoot() && !isRubyRun() && !isGridItem())
    30043004        return std::nullopt;
    30053005

  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r238395 r238457  
    207207            if (GridLayoutFunctions::isOrthogonalChild(*this, *child))
    208208                m_hasAnyOrthogonalItem = true;
    209         }
    210 
     209
     210            // We keep a cache of items with baseline as alignment values so
     211            // that we only compute the baseline shims for such items. This
     212            // cache is needed for performance related reasons due to the
     213            // cost of evaluating the item's participation in a baseline
     214            // context during the track sizing algorithm.
     215            if (isBaselineAlignmentForChild(*child, GridColumnAxis))
     216                m_trackSizingAlgorithm.cacheBaselineAlignedItem(*child, GridColumnAxis);
     217            if (isBaselineAlignmentForChild(*child, GridRowAxis))
     218                m_trackSizingAlgorithm.cacheBaselineAlignedItem(*child, GridRowAxis);
     219        }
     220        m_baselineItemsCached = true;
    211221        setLogicalHeight(0);
    212222        updateLogicalWidth();
    … …  
    299309
    300310    clearNeedsLayout();
     311
     312    m_trackSizingAlgorithm.clearBaselineItemsCache();
     313    m_baselineItemsCached = false;
    301314}
    302315
    … …  
    392405
    393406    performGridItemsPreLayout(algorithm);
     407
     408    if (m_baselineItemsCached)
     409        algorithm.copyBaselineItemsCache(m_trackSizingAlgorithm, GridRowAxis);
     410    else {
     411        for (auto* child = firstChildBox(); child; child = child->nextSiblingBox()) {
     412            if (child->isOutOfFlowPositioned())
     413                continue;
     414            if (isBaselineAlignmentForChild(*child, GridRowAxis))
     415                algorithm.cacheBaselineAlignedItem(*child, GridRowAxis);
     416        }
     417    }
    394418
    395419    computeTrackSizesForIndefiniteSize(algorithm, ForColumns, minLogicalWidth, maxLogicalWidth);
    … …  
    594618            continue;
    595619
     620        // Grid items should use the grid area sizes instead of the containing block (grid container)
     621        // sizes, we initialize the overrides here if needed to ensure it.
     622        if (!child->hasOverrideContainingBlockContentLogicalWidth())
     623            child->setOverrideContainingBlockContentLogicalWidth(LayoutUnit());
     624        if (!child->hasOverrideContainingBlockContentLogicalHeight())
     625            child->setOverrideContainingBlockContentLogicalHeight(LayoutUnit(-1));
     626
    596627        GridArea area = grid.gridItemArea(*child);
    597628        if (!area.rows.isIndefinite())
    … …  
    651682        // We also need to properly estimate its grid area size, since it may affect to the baseline shims if such item particiaptes in baseline alignment.
    652683        if (GridLayoutFunctions::isOrthogonalChild(*this, *child)) {
     684            updateGridAreaLogicalSize(*child, algorithm.estimatedGridAreaBreadthForChild(*child));
     685            child->layoutIfNeeded();
     686            continue;
     687        }
     688        // We need to layout the item to know whether it must synthesize its
     689        // baseline or not, which may imply a cyclic sizing dependency.
     690        // FIXME: Can we avoid it ?
     691        if (isBaselineAlignmentForChild(*child)) {
    653692            updateGridAreaLogicalSize(*child, algorithm.estimatedGridAreaBreadthForChild(*child));
    654693            child->layoutIfNeeded();
    … …  
    11831222}
    11841223
    1185 bool RenderGrid::isInlineBaselineAlignedChild(const RenderBox& child) const
    1186 {
    1187     return alignSelfForChild(child).position() == ItemPosition::Baseline && !GridLayoutFunctions::isOrthogonalChild(*this, child) && !hasAutoMarginsInColumnAxis(child);
     1224static int synthesizedBaselineFromMarginBox(const RenderBox& box, LineDirectionMode direction)
     1225{
     1226    return (direction == HorizontalLine ? box.size().height() + box.verticalMarginExtent() : box.size().width() + box.horizontalMarginExtent()).toInt();
     1227}
     1228
     1229bool RenderGrid::isBaselineAlignmentForChild(const RenderBox& child) const
     1230{
     1231    return isBaselineAlignmentForChild(child, GridRowAxis) || isBaselineAlignmentForChild(child, GridColumnAxis);
     1232}
     1233
     1234bool RenderGrid::isBaselineAlignmentForChild(const RenderBox& child, GridAxis baselineAxis) const
     1235{
     1236    if (child.isOutOfFlowPositioned())
     1237        return false;
     1238    ItemPosition align = selfAlignmentForChild(baselineAxis, child).position();
     1239    bool hasAutoMargins = baselineAxis == GridColumnAxis ? hasAutoMarginsInColumnAxis(child) : hasAutoMarginsInRowAxis(child);
     1240    return isBaselinePosition(align) && !hasAutoMargins;
    11881241}
    11891242
    … …  
    11961249    UNUSED_PARAM(mode);
    11971250#endif
    1198     int baseline = firstLineBaseline().value_or(synthesizedBaselineFromBorderBox(*this, direction));
    1199 
    1200     int marginSize = direction == HorizontalLine ? verticalMarginExtent() : horizontalMarginExtent();
    1201     return baseline + marginSize;
     1251    return firstLineBaseline().value_or(synthesizedBaselineFromMarginBox(*this, direction));
    12021252}
    12031253
    … …  
    12141264            ASSERT(child.get());
    12151265            // If an item participates in baseline alignment, we select such item.
    1216             if (isInlineBaselineAlignedChild(*child)) {
     1266            if (isBaselineAlignmentForChild(*child)) {
    12171267                // FIXME: self-baseline and content-baseline alignment not implemented yet.
    12181268                baselineChild = child.get();
    … …  
    12431293        return baseline;
    12441294
    1245     int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
     1295    int marginAscent = direction == HorizontalLine ? marginBottom() : marginRight();
    12461296    return synthesizedBaselineFromBorderBox(*this, direction) + marginAscent;
     1297}
     1298
     1299LayoutUnit RenderGrid::columnAxisBaselineOffsetForChild(const RenderBox& child) const
     1300{
     1301    return m_trackSizingAlgorithm.baselineOffsetForChild(child, GridColumnAxis);
     1302}
     1303
     1304LayoutUnit RenderGrid::rowAxisBaselineOffsetForChild(const RenderBox& child) const
     1305{
     1306    return m_trackSizingAlgorithm.baselineOffsetForChild(child, GridRowAxis);
    12471307}
    12481308
    … …  
    13941454    switch (axisPosition) {
    13951455    case GridAxisStart:
    1396         return startPosition;
     1456        return startPosition + columnAxisBaselineOffsetForChild(child);
    13971457    case GridAxisEnd:
    13981458    case GridAxisCenter: {
    … …  
    14191479    switch (axisPosition) {
    14201480    case GridAxisStart:
    1421         return startPosition;
     1481        return startPosition + rowAxisBaselineOffsetForChild(child);
    14221482    case GridAxisEnd:
    14231483    case GridAxisCenter: {

  • trunk/Source/WebCore/rendering/RenderGrid.h

    r238114 r238457  
    4747
    4848enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
    49 enum GridAxis { GridRowAxis, GridColumnAxis };
    5049
    5150class RenderGrid final : public RenderBlock {
    … …  
    7675
    7776    void updateGridAreaLogicalSize(RenderBox&, LayoutSize) const;
     77    bool isBaselineAlignmentForChild(const RenderBox&) const;
     78    bool isBaselineAlignmentForChild(const RenderBox&, GridAxis) const;
     79
     80    StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
    7881
    7982    StyleContentAlignmentData contentAlignment(GridTrackSizingDirection) const;
    … …  
    9194    void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
    9295
    93     StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
    9496    bool selfAlignmentChangedToStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
    9597    bool selfAlignmentChangedFromStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
    … …  
    174176    bool isInlineBaselineAlignedChild(const RenderBox&) const;
    175177
     178    LayoutUnit columnAxisBaselineOffsetForChild(const RenderBox&) const;
     179    LayoutUnit rowAxisBaselineOffsetForChild(const RenderBox&) const;
     180
    176181    LayoutUnit gridGap(GridTrackSizingDirection) const;
    177182    LayoutUnit gridGap(GridTrackSizingDirection, std::optional<LayoutUnit> availableSize) const;
    … …  
    200205
    201206    bool m_hasAnyOrthogonalItem {false};
     207    bool m_baselineItemsCached {false};
    202208};
    203209
Note: See TracChangeset for help on using the changeset viewer.