Commit a2871019 authored by svillar@igalia.com's avatar svillar@igalia.com

[CSS Grid Layout] Implement the grid-area shorthand

https://bugs.webkit.org/show_bug.cgi?id=103334

Reviewed by Andreas Kling.

Source/WebCore:

Based on Blink r151684 by <jchaffraix@chromium.org>

Test: fast/css-grid-layout/grid-item-area-get-set.html

Added support to specify grid positions using the
'-webkit-grid-area' shorthand. Named grid areas are still not
allowed, to be done in a follow up patch as it likely requires
'-webkit-grid-template' support.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridItemPositionShorthand):
* css/CSSPropertyNames.in:
* css/StylePropertySet.cpp:
(WebCore::StylePropertySet::getPropertyValue):
* css/StylePropertyShorthand.cpp:
(WebCore::webkitGridAreaShorthand):
(WebCore::shorthandForProperty):
* css/StylePropertyShorthand.h:
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty):

LayoutTests:

From Blink r151684 by <jchaffraix@chromium.org>

* fast/css-grid-layout/grid-item-area-get-set-expected.txt: Added.
* fast/css-grid-layout/grid-item-area-get-set.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@156638 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 4c500bc5
2013-09-18 Sergio Villar Senin <svillar@igalia.com>
[CSS Grid Layout] Implement the grid-area shorthand
https://bugs.webkit.org/show_bug.cgi?id=103334
Reviewed by Andreas Kling.
From Blink r151684 by <jchaffraix@chromium.org>
* fast/css-grid-layout/grid-item-area-get-set-expected.txt: Added.
* fast/css-grid-layout/grid-item-area-get-set.html: Added.
2013-09-30 Vani Hegde <vani.hegde@samsung.com>
user-select: none cursor turns to I-beam on mouse dragging
This test checks that -webkit-grid-area is properly parsed and stored internally.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Test getting -webkit-grid-area set through CSS
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-5"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 8"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "9"
Test getting and setting -webkit-grid-area set through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
Test setting some positions to invalid values through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
<!DOCTYPE html>
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<style>
#oneValueGridArea {
-webkit-grid-area: 1;
}
#twoValueGridArea {
-webkit-grid-area: -1 / span 1;
}
#threeValueGridArea {
-webkit-grid-area: span / 10 / -1;
}
#fourValueGridArea {
-webkit-grid-area: -5 / 5 span / span 8 / 9;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="oneValueGridArea"></div>
<div id="twoValueGridArea"></div>
<div id="threeValueGridArea"></div>
<div id="fourValueGridArea"></div>
<script>
description('This test checks that -webkit-grid-area is properly parsed and stored internally.');
function valueOrDefaultGridPosition(gridPosition)
{
return gridPosition === undefined ? "auto" : gridPosition;
}
function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
{
this.gridItem = gridItem;
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start')", gridRowStart);
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start')", valueOrDefaultGridPosition(gridColumnStart));
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end')", valueOrDefaultGridPosition(gridRowEnd));
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd));
}
function testGridAreaCSSParsing(gridItemId, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
{
checkColumnRowValues(document.getElementById(gridItemId), gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd);
}
function testGridAreaJSParsing(gridAreaValue)
{
var element = document.createElement("div");
document.body.appendChild(element);
// Pre-fill it with values to detect that we properly handle and reset unset values.
element.style.webkitGridArea = "1 / 2 / 3 / 4";
element.style.webkitGridArea = gridAreaValue;
// Get the different values.
var gridColumnRowValues = gridAreaValue.split("/");
var gridColumnStart = gridColumnRowValues[1] ? gridColumnRowValues[1].trim() : undefined;
var gridRowEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim() : undefined;
var gridColumnEnd = gridColumnRowValues[3] ? gridColumnRowValues[3].trim() : undefined;
checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridColumnStart, gridRowEnd, gridColumnEnd);
document.body.removeChild(element);
}
function testGridAreaInvalidJSParsing(gridAreaValue)
{
var element = document.createElement("div");
document.body.appendChild(element);
checkColumnRowValues(element, "auto", "auto", "auto", "auto");
document.body.removeChild(element);
}
debug("Test getting -webkit-grid-area set through CSS");
testGridAreaCSSParsing("oneValueGridArea", "1");
testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1");
testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1");
testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9");
debug("");
debug("Test getting and setting -webkit-grid-area set through JS");
testGridAreaJSParsing("-1");
testGridAreaJSParsing("-1 / span 5");
testGridAreaJSParsing("-1 / 10 / span 3");
debug("");
debug("Test setting some positions to invalid values through JS");
testGridAreaInvalidJSParsing("span / span / span /");
testGridAreaInvalidJSParsing("1/ span span / 1 / span");
testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1");
testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1");
</script>
</body>
</html>
2013-09-18 Sergio Villar Senin <svillar@igalia.com>
[CSS Grid Layout] Implement the grid-area shorthand
https://bugs.webkit.org/show_bug.cgi?id=103334
Reviewed by Andreas Kling.
Based on Blink r151684 by <jchaffraix@chromium.org>
Test: fast/css-grid-layout/grid-item-area-get-set.html
Added support to specify grid positions using the
'-webkit-grid-area' shorthand. Named grid areas are still not
allowed, to be done in a follow up patch as it likely requires
'-webkit-grid-template' support.
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridItemPositionShorthand):
* css/CSSPropertyNames.in:
* css/StylePropertySet.cpp:
(WebCore::StylePropertySet::getPropertyValue):
* css/StylePropertyShorthand.cpp:
(WebCore::webkitGridAreaShorthand):
(WebCore::shorthandForProperty):
* css/StylePropertyShorthand.h:
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty):
2013-09-30 Gyuyoung Kim <gyuyoung.kim@samsung.com>
Generate toCSSFooValue for CSSGradientValue, CSSLinearGradientValue and CSSRadialGradient
......@@ -2137,6 +2137,8 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
return valueForGridPosition(style->gridItemRowStart());
case CSSPropertyWebkitGridRowEnd:
return valueForGridPosition(style->gridItemRowEnd());
case CSSPropertyWebkitGridArea:
return getCSSPropertyValuesForGridShorthand(webkitGridAreaShorthand());
case CSSPropertyWebkitGridColumn:
return getCSSPropertyValuesForGridShorthand(webkitGridColumnShorthand());
case CSSPropertyWebkitGridRow:
......
......@@ -2702,6 +2702,7 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
parsedValue = parseGridPosition();
break;
case CSSPropertyWebkitGridArea:
case CSSPropertyWebkitGridColumn:
case CSSPropertyWebkitGridRow: {
if (!cssGridLayoutEnabled())
......@@ -4892,24 +4893,30 @@ bool CSSParser::parseGridItemPositionShorthand(CSSPropertyID shorthandId, bool i
{
ShorthandScope scope(this, shorthandId);
const StylePropertyShorthand& shorthand = shorthandForProperty(shorthandId);
ASSERT(shorthand.length() == 2);
if (!parseValue(shorthand.properties()[0], important))
return false;
if (!m_valueList->current()) {
// Only one value was specified, the opposite value should be set to 'auto'.
// FIXME: If the first property was <ident>, the opposite value should be the same <ident>.
addProperty(shorthand.properties()[1], cssValuePool().createIdentifierValue(CSSValueAuto), important);
return true;
}
size_t index = 1;
for (; index < shorthand.length(); ++index) {
if (!m_valueList->current())
break;
if (!isForwardSlashOperator(m_valueList->current()))
return false;
if (!isForwardSlashOperator(m_valueList->current()))
return false;
if (!m_valueList->next())
return false;
if (!m_valueList->next())
return false;
if (!parseValue(shorthand.properties()[index], important))
return false;
}
// Only some values out of the {2|4} positions were specified, the other values should be set to 'auto'.
// FIXME: If the first property was <ident>, the opposite value should be the same <ident>.
for (; index < shorthand.length(); ++index)
addProperty(shorthand.properties()[index], cssValuePool().createIdentifierValue(CSSValueAuto), important);
return parseValue(shorthand.properties()[1], important);
return true;
}
bool CSSParser::parseGridTrackList(CSSPropertyID propId, bool important)
......
......@@ -303,6 +303,7 @@ z-index
-webkit-flex-wrap
-webkit-justify-content
-webkit-font-size-delta
-webkit-grid-area
-webkit-grid-auto-columns
-webkit-grid-auto-rows
-webkit-grid-column-end
......
......@@ -165,6 +165,8 @@ String StylePropertySet::getPropertyValue(CSSPropertyID propertyID) const
return getShorthandValue(webkitFlexShorthand());
case CSSPropertyWebkitFlexFlow:
return getShorthandValue(webkitFlexFlowShorthand());
case CSSPropertyWebkitGridArea:
return getShorthandValue(webkitGridAreaShorthand());
case CSSPropertyWebkitGridColumn:
return getShorthandValue(webkitGridColumnShorthand());
case CSSPropertyWebkitGridRow:
......
......@@ -353,6 +353,17 @@ StylePropertyShorthand webkitMarginCollapseShorthand()
return StylePropertyShorthand(CSSPropertyWebkitMarginCollapse, marginCollapseProperties, WTF_ARRAY_LENGTH(marginCollapseProperties));
}
StylePropertyShorthand webkitGridAreaShorthand()
{
static const CSSPropertyID webkitGridAreaProperties[] = {
CSSPropertyWebkitGridRowStart,
CSSPropertyWebkitGridColumnStart,
CSSPropertyWebkitGridRowEnd,
CSSPropertyWebkitGridColumnEnd
};
return StylePropertyShorthand(CSSPropertyWebkitGridArea, webkitGridAreaProperties, WTF_ARRAY_LENGTH(webkitGridAreaProperties));
}
StylePropertyShorthand webkitGridColumnShorthand()
{
static const CSSPropertyID webkitGridColumnProperties[] = {
......@@ -545,6 +556,8 @@ StylePropertyShorthand shorthandForProperty(CSSPropertyID propertyID)
return webkitFlexShorthand();
case CSSPropertyWebkitFlexFlow:
return webkitFlexFlowShorthand();
case CSSPropertyWebkitGridArea:
return webkitGridAreaShorthand();
case CSSPropertyWebkitGridColumn:
return webkitGridColumnShorthand();
case CSSPropertyWebkitGridRow:
......
......@@ -99,6 +99,7 @@ StylePropertyShorthand webkitColumnsShorthand();
StylePropertyShorthand webkitColumnRuleShorthand();
StylePropertyShorthand webkitFlexFlowShorthand();
StylePropertyShorthand webkitFlexShorthand();
StylePropertyShorthand webkitGridAreaShorthand();
StylePropertyShorthand webkitGridColumnShorthand();
StylePropertyShorthand webkitGridRowShorthand();
StylePropertyShorthand webkitMarginCollapseShorthand();
......
......@@ -2351,6 +2351,7 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
case CSSPropertyWebkitColumnRule:
case CSSPropertyWebkitFlex:
case CSSPropertyWebkitFlexFlow:
case CSSPropertyWebkitGridArea:
case CSSPropertyWebkitGridColumn:
case CSSPropertyWebkitGridRow:
case CSSPropertyWebkitMarginCollapse:
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment