COMMIT_MESSAGE

 1 [CSS Grid Layout] Add the plumbing to parse -webkit-grid-{column,row}-span
 2https://bugs.webkit.org/show_bug.cgi?id=105548
 3
 4 Reviewed by NOBODY (OOPS!).
 5
 6 Add basic plumbing to parse the column/row span properties. No
 7 effect on layout yet.
 8
 9 Test: fast/css-grid-layout/grid-item-column-row-span-get-set.html
 10
 11 * css/CSSComputedStyleDeclaration.cpp:
 12 (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
 13 Return the span values.
 14 * css/CSSParser.cpp:
 15 (WebCore::CSSParser::parseValue): Parse the new properties.
 16 * css/CSSProperty.cpp:
 17 (WebCore::CSSProperty::isInheritedProperty): Add new properties to
 18 the switch.
 19 * css/CSSPropertyNames.in:
 20 * css/StyleResolver.cpp:
 21 (WebCore::createGridSpan): Method to convert from the CSSValue to
 22 the span value.
 23 (WebCore::StyleResolver::applyProperty): Set the span values.
 24 * rendering/style/GridPosition.h:
 25 (WebCore::GridPosition::GridPosition):
 26 (GridPosition): Allow to construct a GridPosition with an integer
 27 value, to be used for the default span values ('1').
 28 * rendering/style/RenderStyle.h:
 29 * rendering/style/StyleGridItemData.cpp:
 30 (WebCore::StyleGridItemData::StyleGridItemData): Initialize the
 31 default span values.
 32 * rendering/style/StyleGridItemData.h:
 33 (WebCore::StyleGridItemData::operator==): Consider the span values
 34 when doing the == comparison.
 35 (StyleGridItemData): Add the span to the item data. We use a
 36 GridPosition, but only integer and identifier values will be
 37 allowed.
 38
 39 LayoutTests:
 40
 41 [CSS Grid Layout] Add the plumbing to parse -webkit-grid-{column,row}-span
 42 https://bugs.webkit.org/show_bug.cgi?id=105548
 43
 44 Reviewed by NOBODY (OOPS!).
 45
 46 * fast/css-grid-layout/grid-item-column-row-span-get-set-expected.txt: Added.
 47 * fast/css-grid-layout/grid-item-column-row-span-get-set.html: Added.

LayoutTests/ChangeLog

 12012-12-21 Xan Lopez <xlopez@igalia.com>
 2
 3 [CSS Grid Layout] Add the plumbing to parse -webkit-grid-{column,row}-span
 4 https://bugs.webkit.org/show_bug.cgi?id=105548
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * fast/css-grid-layout/grid-item-column-row-span-get-set-expected.txt: Added.
 9 * fast/css-grid-layout/grid-item-column-row-span-get-set.html: Added.
 10
1112012-12-19 Levi Weintraub <leviw@chromium.org>
212
313 Re-skipping touch-input-element-chang-documents.html since it's still

LayoutTests/fast/css-grid-layout/grid-item-column-row-span-get-set-expected.txt

 1Test that setting and getting -webkit-grid-column-span and -webkit-grid-row-span works as expected
 2
 3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 4
 5
 6Test getting -webkit-grid-column-span and -webkit-grid-row-span set through CSS
 7PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-span') is '1'
 8PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-span') is '1'
 9PASS getComputedStyle(gridItemWithColumnSpan, '').getPropertyValue('-webkit-grid-column') is '1'
 10PASS getComputedStyle(gridItemWithColumnSpan, '').getPropertyValue('-webkit-grid-column-span') is '5'
 11PASS getComputedStyle(gridItemWithRowSpan, '').getPropertyValue('-webkit-grid-row') is '2'
 12PASS getComputedStyle(gridItemWithRowSpan, '').getPropertyValue('-webkit-grid-row-span') is '3'
 13PASS getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-row') is '7'
 14PASS getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-column') is '5'
 15PASS getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-row-span') is '3'
 16PASS getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-column-span') is '10'
 17PASS getComputedStyle(gridItemWithMultipleValuesForSpan, '').getPropertyValue('-webkit-grid-row-span') is '1'
 18PASS getComputedStyle(gridItemWithMultipleValuesForSpan, '').getPropertyValue('-webkit-grid-column-span') is '1'
 19PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-span') is '5'
 20PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-span') is '12'
 21PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-span') is '1'
 22PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-span') is '1'
 23PASS successfullyParsed is true
 24
 25TEST COMPLETE
 26

LayoutTests/fast/css-grid-layout/grid-item-column-row-span-get-set.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4<script>
 5if (window.testRunner)
 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
 7</script>
 8<style>
 9.gridItemWithColumnSpan {
 10 -webkit-grid-column: 1;
 11 -webkit-grid-column-span: 5;
 12}
 13
 14.gridItemWithRowSpan {
 15 -webkit-grid-row: 2;
 16 -webkit-grid-row-span: 3;
 17}
 18
 19.gridItemWithColumnRowSpan {
 20 -webkit-grid-column: 5;
 21 -webkit-grid-row: 7;
 22 -webkit-grid-column-span: 10;
 23 -webkit-grid-row-span: 3;
 24}
 25
 26.gridItemWithMultipleValuesForSpan {
 27 -webkit-grid-column-span: 1 2 3;
 28}
 29</style>
 30<script src="../js/resources/js-test-pre.js"></script>
 31</head>
 32<body>
 33<!-- The first has no properties set on it. -->
 34<div id="gridElement"></div>
 35<div class="gridItemWithColumnSpan" id="gridItemWithColumnSpan"></div>
 36<div class="gridItemWithRowSpan" id="gridItemWithRowSpan"></div>
 37<div class="gridItemWithColumnRowSpan" id="gridItemWithColumnRowSpan"></div>
 38<div class="gridItemWithMultipleValuesForSpan" id="gridItemWithMultipleValuesForSpan"></div>
 39<script>
 40 description('Test that setting and getting -webkit-grid-column-span and -webkit-grid-row-span works as expected');
 41
 42 debug("Test getting -webkit-grid-column-span and -webkit-grid-row-span set through CSS");
 43 var gridElement = document.getElementById("gridElement");
 44 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-span')", "'1'");
 45 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-span')", "'1'");
 46
 47 var gridItemWithPositiveInteger = document.getElementById("gridItemWithColumnSpan");
 48 shouldBe("getComputedStyle(gridItemWithColumnSpan, '').getPropertyValue('-webkit-grid-column')", "'1'");
 49 shouldBe("getComputedStyle(gridItemWithColumnSpan, '').getPropertyValue('-webkit-grid-column-span')", "'5'");
 50
 51 var gridItemWithPositiveInteger = document.getElementById("gridItemWithRowSpan");
 52 shouldBe("getComputedStyle(gridItemWithRowSpan, '').getPropertyValue('-webkit-grid-row')", "'2'");
 53 shouldBe("getComputedStyle(gridItemWithRowSpan, '').getPropertyValue('-webkit-grid-row-span')", "'3'");
 54
 55 var gridItemWithPositiveInteger = document.getElementById("gridItemWithColumnRowSpan");
 56 shouldBe("getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-row')", "'7'");
 57 shouldBe("getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-column')", "'5'");
 58 shouldBe("getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-row-span')", "'3'");
 59 shouldBe("getComputedStyle(gridItemWithColumnRowSpan, '').getPropertyValue('-webkit-grid-column-span')", "'10'");
 60
 61 var gridItemWithPositiveInteger = document.getElementById("gridItemWithMultipleValuesForSpan");
 62 shouldBe("getComputedStyle(gridItemWithMultipleValuesForSpan, '').getPropertyValue('-webkit-grid-row-span')", "'1'");
 63 shouldBe("getComputedStyle(gridItemWithMultipleValuesForSpan, '').getPropertyValue('-webkit-grid-column-span')", "'1'");
 64
 65 element = document.createElement("div");
 66 document.body.appendChild(element);
 67 element.style.webkitGridColumnSpan = "5";
 68 element.style.webkitGridRowSpan = "12";
 69 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-span')", "'5'");
 70 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-span')", "'12'");
 71
 72 element = document.createElement("div");
 73 document.body.appendChild(element);
 74 element.style.webkitGridColumnSpan = "1 2 3";
 75 element.style.webkitGridRowSpan = "4 5 6";
 76 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-span')", "'1'");
 77 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-span')", "'1'");
 78
 79</script>
 80<script src="../js/resources/js-test-post.js"></script>
 81</body>
 82</html>

Source/WebCore/ChangeLog

 12012-12-21 Xan Lopez <xlopez@igalia.com>
 2
 3 [CSS Grid Layout] Add the plumbing to parse -webkit-grid-{column,row}-span
 4 https://bugs.webkit.org/show_bug.cgi?id=105548
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Add basic plumbing to parse the column/row span properties. No
 9 effect on layout yet.
 10
 11 Test: fast/css-grid-layout/grid-item-column-row-span-get-set.html
 12
 13 * css/CSSComputedStyleDeclaration.cpp:
 14 (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
 15 Return the span values.
 16 * css/CSSParser.cpp:
 17 (WebCore::CSSParser::parseValue): Parse the new properties.
 18 * css/CSSProperty.cpp:
 19 (WebCore::CSSProperty::isInheritedProperty): Add new properties to
 20 the switch.
 21 * css/CSSPropertyNames.in:
 22 * css/StyleResolver.cpp:
 23 (WebCore::createGridSpan): Method to convert from the CSSValue to
 24 the span value.
 25 (WebCore::StyleResolver::applyProperty): Set the span values.
 26 * rendering/style/GridPosition.h:
 27 (WebCore::GridPosition::GridPosition):
 28 (GridPosition): Allow to construct a GridPosition with an integer
 29 value, to be used for the default span values ('1').
 30 * rendering/style/RenderStyle.h:
 31 * rendering/style/StyleGridItemData.cpp:
 32 (WebCore::StyleGridItemData::StyleGridItemData): Initialize the
 33 default span values.
 34 * rendering/style/StyleGridItemData.h:
 35 (WebCore::StyleGridItemData::operator==): Consider the span values
 36 when doing the == comparison.
 37 (StyleGridItemData): Add the span to the item data. We use a
 38 GridPosition, but only integer and identifier values will be
 39 allowed.
 40
1412012-12-04 Xan Lopez <xlopez@igalia.com>
242
343 [CSS] LenghtFunctions methods should receive a const RenderView

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropert
18611861 case CSSPropertyWebkitGridRow:
18621862 return valueForGridPosition(style->gridItemRow());
18631863
 1864 case CSSPropertyWebkitGridColumnSpan:
 1865 return valueForGridPosition(style->gridItemColumnSpan());
 1866 case CSSPropertyWebkitGridRowSpan:
 1867 return valueForGridPosition(style->gridItemRowSpan());
 1868
18641869 case CSSPropertyHeight:
18651870 if (renderer) {
18661871 // According to http://www.w3.org/TR/CSS2/visudet.html#the-height-property,

Source/WebCore/css/CSSParser.cpp

@@bool CSSParser::parseValue(CSSPropertyID propId, bool important)
25072507 validPrimitive = id == CSSValueAuto || validUnit(value, FInteger);
25082508 break;
25092509
 2510 case CSSPropertyWebkitGridColumnSpan:
 2511 case CSSPropertyWebkitGridRowSpan:
 2512 if (!cssGridLayoutEnabled())
 2513 return false;
 2514 validPrimitive = validUnit(value, FInteger);
 2515 break;
 2516
25102517 case CSSPropertyWebkitMarginCollapse: {
25112518 if (num == 1) {
25122519 ShorthandScope scope(this, CSSPropertyWebkitMarginCollapse);

Source/WebCore/css/CSSProperty.cpp

@@bool CSSProperty::isInheritedProperty(CSSPropertyID propertyID)
578578 case CSSPropertyWebkitGridRows:
579579 case CSSPropertyWebkitGridColumn:
580580 case CSSPropertyWebkitGridRow:
 581 case CSSPropertyWebkitGridColumnSpan:
 582 case CSSPropertyWebkitGridRowSpan:
581583 case CSSPropertyWebkitLineClamp:
582584 case CSSPropertyWebkitLogicalWidth:
583585 case CSSPropertyWebkitLogicalHeight:

Source/WebCore/css/CSSPropertyNames.in

@@z-index
294294-webkit-grid-rows
295295-webkit-grid-column
296296-webkit-grid-row
 297-webkit-grid-column-span
 298-webkit-grid-row-span
297299-webkit-highlight
298300-webkit-hyphenate-character
299301-webkit-hyphenate-limit-after

Source/WebCore/css/StyleResolver.cpp

@@static bool createGridTrackList(CSSValue* value, Vector<GridTrackSize>& trackSiz
28342834 return createGridTrackGroup(value, selector, trackSizes);
28352835}
28362836
 2837static bool createGridSpan(CSSValue *value, GridPosition& span)
 2838{
 2839 // For now, we only accept: <integer>
 2840 if (!value->isPrimitiveValue())
 2841 return false;
 2842
 2843 CSSPrimitiveValue* primitiveValue = static_cast<CSSPrimitiveValue*>(value);
 2844 ASSERT(primitiveValue->isNumber());
 2845 span.setIntegerPosition(primitiveValue->getIntValue());
 2846 return true;
 2847}
28372848
28382849static bool createGridPosition(CSSValue* value, GridPosition& position)
28392850{

@@void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
37113722 m_style->setGridItemRow(row);
37123723 return;
37133724 }
 3725 case CSSPropertyWebkitGridColumnSpan: {
 3726 GridPosition columnSpan;
 3727 if (!createGridSpan(value, columnSpan))
 3728 return;
 3729 m_style->setGridItemColumnSpan(columnSpan);
 3730 return;
 3731 }
 3732 case CSSPropertyWebkitGridRowSpan: {
 3733 GridPosition rowSpan;
 3734 if (!createGridSpan(value, rowSpan))
 3735 return;
 3736 m_style->setGridItemRowSpan(rowSpan);
 3737 return;
 3738 }
37143739 // These properties are implemented in the StyleBuilder lookup table.
37153740 case CSSPropertyBackgroundAttachment:
37163741 case CSSPropertyBackgroundClip:

Source/WebCore/rendering/style/GridPosition.h

@@public:
4646 {
4747 }
4848
 49 GridPosition(int position)
 50 : m_type(IntegerPosition)
 51 , m_integerPosition(position)
 52 {
 53 }
 54
4955 bool isPositive() const { return integerPosition() > 0; }
5056
5157 GridPositionType type() const { return m_type; }

Source/WebCore/rendering/style/RenderStyle.h

@@public:
765765 const GridPosition& gridItemColumn() const { return rareNonInheritedData->m_gridItem->m_gridColumn; }
766766 const GridPosition& gridItemRow() const { return rareNonInheritedData->m_gridItem->m_gridRow; }
767767
 768 const GridPosition& gridItemColumnSpan() const { return rareNonInheritedData->m_gridItem->m_gridColumnSpan; }
 769 const GridPosition& gridItemRowSpan() const { return rareNonInheritedData->m_gridItem->m_gridRowSpan; }
 770
768771 const ShadowData* boxShadow() const { return rareNonInheritedData->m_boxShadow.get(); }
769772 void getBoxShadowExtent(LayoutUnit& top, LayoutUnit& right, LayoutUnit& bottom, LayoutUnit& left) const { getShadowExtent(boxShadow(), top, right, bottom, left); }
770773 LayoutBoxExtent getBoxShadowInsetExtent() const { return getShadowInsetExtent(boxShadow()); }

@@public:
12511254 void setGridRows(const Vector<GridTrackSize>& lengths) { SET_VAR(rareNonInheritedData.access()->m_grid, m_gridRows, lengths); }
12521255 void setGridItemColumn(const GridPosition& columnPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridColumn, columnPosition); }
12531256 void setGridItemRow(const GridPosition& rowPosition) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRow, rowPosition); }
 1257 void setGridItemColumnSpan(const GridPosition& columnSpan) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridColumnSpan, columnSpan); }
 1258 void setGridItemRowSpan(const GridPosition& rowSpan) { SET_VAR(rareNonInheritedData.access()->m_gridItem, m_gridRowSpan, rowSpan); }
12541259
12551260 void setMarqueeIncrement(const Length& f) { SET_VAR(rareNonInheritedData.access()->m_marquee, increment, f); }
12561261 void setMarqueeSpeed(int f) { SET_VAR(rareNonInheritedData.access()->m_marquee, speed, f); }

@@public:
16541659 static GridPosition initialGridItemColumn() { return GridPosition(); }
16551660 static GridPosition initialGridItemRow() { return GridPosition(); }
16561661
 1662 // The initial value is '1' for column and row span
 1663 static GridPosition initialGridItemColumnSpan() { return GridPosition(1); }
 1664 static GridPosition initialGridItemRowSpan() { return GridPosition(1); }
 1665
16571666 static unsigned initialTabSize() { return 8; }
16581667
16591668 static const AtomicString& initialLineGrid() { return nullAtom; }

Source/WebCore/rendering/style/StyleGridItemData.cpp

@@namespace WebCore {
3737StyleGridItemData::StyleGridItemData()
3838 : m_gridColumn(RenderStyle::initialGridItemColumn())
3939 , m_gridRow(RenderStyle::initialGridItemRow())
 40 , m_gridColumnSpan(RenderStyle::initialGridItemColumnSpan())
 41 , m_gridRowSpan(RenderStyle::initialGridItemRowSpan())
4042{
4143}
4244

@@StyleGridItemData::StyleGridItemData(const StyleGridItemData& o)
4446 : RefCounted<StyleGridItemData>()
4547 , m_gridColumn(o.m_gridColumn)
4648 , m_gridRow(o.m_gridRow)
 49 , m_gridColumnSpan(o.m_gridColumnSpan)
 50 , m_gridRowSpan(o.m_gridRowSpan)
4751{
4852}
4953

Source/WebCore/rendering/style/StyleGridItemData.h

@@public:
4646
4747 bool operator==(const StyleGridItemData& o) const
4848 {
49  return m_gridColumn == o.m_gridColumn && m_gridRow == o.m_gridRow;
 49 return m_gridColumn == o.m_gridColumn && m_gridRow == o.m_gridRow && m_gridColumnSpan == o.m_gridColumnSpan && m_gridRowSpan == o.m_gridRowSpan;
5050 }
5151
5252 bool operator!=(const StyleGridItemData& o) const

@@public:
5757 GridPosition m_gridColumn;
5858 GridPosition m_gridRow;
5959
 60 GridPosition m_gridColumnSpan;
 61 GridPosition m_gridRowSpan;
6062private:
6163 StyleGridItemData();
6264 StyleGridItemData(const StyleGridItemData&);