[webkit-changes] [WebKit/WebKit] 1e74b5: Implement masonry-auto-flow for CSS Grid Masonry L...

Sammy Gill noreply at github.com
Fri Dec 9 12:37:27 PST 2022


  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 1e74b53c5b2ba2cf8695b05277587845053adc42
      https://github.com/WebKit/WebKit/commit/1e74b53c5b2ba2cf8695b05277587845053adc42
  Author: Sammy Gill <sammy.gill at apple.com>
  Date:   2022-12-09 (Fri, 09 Dec 2022)

  Changed paths:
    M LayoutTests/TestExpectations
    A LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-expected.html
    A LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html
    A LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-expected.html
    A LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html
    M Source/WebCore/css/ComputedStyleExtractor.cpp
    M Source/WebCore/rendering/GridMasonryLayout.cpp
    M Source/WebCore/rendering/GridMasonryLayout.h

  Log Message:
  -----------
  Implement masonry-auto-flow for CSS Grid Masonry Layout.
https://bugs.webkit.org/show_bug.cgi?id=247079
rdar://101597425

Reviewed by Brent Fulgham.

The masory-auto-flow property modifies how items are placed during
masonry layout. If the property specifies "next," then items will be
placed in the next available position rather than finding the grid axis
track with most available space. If the property specifies "ordered,"
then all items after first track items are placed using order-modified
document order rather prioritizing items with definite grid axis
positions.

In order to achieve the "next," functionality, all we need to do is
keep track of a cursor that points to the next available track to
place an item. This cursor will be reset to 0 after the first track
items have been placed. After that, the cursor will be updated after
each item has placed. When an item that does not have a definite grid
axis position needs to be placed, we will then reference the cursor.

In order to achieve the "ordered," functionality, we modify the code to
take a different patch after the first track items have been placed. In
this new path we will use the grid iterator to get the correct order
of items. For each item we will need to check if the item has a definite
grid axis position or not to position the item correctly. In this
scenario we can also avoid allocating memory for the grid vectors that
hold the definite and indefinite grid axis positions items since we will
not be needing them. They were being used to help prioritize the two
different types of items during placement, but in this scenario we do
not need to do that.

Spec reference: https://drafts.csswg.org/css-grid-3/#masonry-auto-flow

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html: Added.
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
* Source/WebCore/rendering/GridMasonryLayout.cpp:
(WebCore::GridMasonryLayout::performMasonryPlacement):
(WebCore::GridMasonryLayout::collectMasonryItems):
(WebCore::GridMasonryLayout::allocateCapacityForMasonryVectors):
(WebCore::GridMasonryLayout::placeItemsUsingOrderModifiedDocumentOrder):
(WebCore::GridMasonryLayout::placeItemsWithDefiniteGridAxisPosition):
(WebCore::GridMasonryLayout::positionForDefiniteGridAxisItem const): Deleted
(WebCore::GridMasonryLayout::gridAreaForDefiniteGridAxisItem const):
(WebCore::GridMasonryLayout::placeItemsWithIndefiniteGridAxisPosition):
(WebCore::GridMasonryLayout::insertIntoGridAndLayoutItem):
(WebCore::GridMasonryLayout::updateRunningPositions):
Rename varaible for a little more clarity that the span is in the grid
axis direction.

(WebCore::GridMasonryLayout::gridAxisPositionUsingPackAutoFlow const):
(WebCore::GridMasonryLayout::gridAxisPositionUsingNextAutoFlow):
(WebCore::GridMasonryLayout::positionForIndefiniteGridAxisItem): Deleted
(WebCore::GridMasonryLayout::gridAreaForIndefiniteGridAxisItem):
Depending on the value of masonry-auto-flow, we will need to see which
code path to use to determine the position of items that have an
indefinite position in the grid axis.

(WebCore::GridMasonryLayout::gridAxisSpanFromArea const):
(WebCore::GridMasonryLayout::masonryGridAreaFromGridAxisSpan const):
(WebCore::GridMasonryLayout::hasEnoughSpaceAtPosition const):
(WebCore::GridMasonryLayout::nextMasonryPositionForItem): Deleted.
* Source/WebCore/rendering/GridMasonryLayout.h:

Canonical link: https://commits.webkit.org/257643@main




More information about the webkit-changes mailing list