Diff
Modified: trunk/LayoutTests/ChangeLog (137477 => 137478)
--- trunk/LayoutTests/ChangeLog 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/ChangeLog 2012-12-12 17:55:24 UTC (rev 137478)
@@ -1,3 +1,19 @@
+2012-12-12 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Implement CSS parsing and handling for min-content and max-content
+ https://bugs.webkit.org/show_bug.cgi?id=104747
+
+ Reviewed by Alexis Menard.
+
+ Extended the 2 tests to cover -webkit-min-content and -webkit-max-content.
+
+ * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+
2012-12-12 Ryosuke Niwa <[email protected]>
Copying text with ruby inserts new lines around rt elements
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2012-12-12 17:55:24 UTC (rev 137478)
@@ -18,6 +18,10 @@
PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-rows') is '60px'
PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-columns') is 'minmax(10%, 15px)'
PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-rows') is 'minmax(20px, 50%)'
+PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-columns') is '-webkit-min-content'
+PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-rows') is '-webkit-min-content'
+PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-columns') is '-webkit-max-content'
+PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-rows') is '-webkit-max-content'
Test getting wrong values for -webkit-grid-columns and -webkit-grid-rows through CSS (they should resolve to the default: 'none')
PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-columns') is 'none'
@@ -38,10 +42,24 @@
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is '80px'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is '150px'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is '-webkit-min-content'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is '-webkit-min-content'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is '-webkit-max-content'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is '-webkit-max-content'
+
+Test getting and setting -webkit-grid-columns and -webkit-grid-rows to minmax() values through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(55%, 45px)'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(30px, 40%)'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(220px, 48px)'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(80px, 50px)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(-webkit-min-content, 48px)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(80px, -webkit-min-content)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(220px, -webkit-max-content)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(-webkit-max-content, 50px)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(220px, -webkit-max-content)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(-webkit-max-content, 50px)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
Test setting grid-columns and grid-rows to bad minmax value through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2012-12-12 17:55:24 UTC (rev 137478)
@@ -18,8 +18,12 @@
PASS getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-rows') is '35% 168px'
PASS getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-columns') is 'none'
PASS getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-rows') is 'none'
+PASS getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-columns') is '-webkit-min-content -webkit-max-content'
+PASS getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-rows') is '-webkit-max-content -webkit-min-content'
PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-columns') is 'minmax(45px, 30%) 15px'
PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-rows') is '120px minmax(35%, 10px)'
+PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-columns') is 'minmax(-webkit-min-content, 30%) 15px'
+PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-rows') is '120px minmax(35%, -webkit-max-content)'
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2012-12-12 17:55:24 UTC (rev 137478)
@@ -54,12 +54,23 @@
-webkit-grid-columns: -webkit-content-available;
-webkit-grid-rows: -webkit-fitcontent -webkit-fit-available;
}
+.gridWithMinMaxContent {
+ display: -webkit-grid;
+ -webkit-grid-columns: -webkit-min-content -webkit-max-content;
+ -webkit-grid-rows: -webkit-max-content -webkit-min-content;
+}
.gridWithMinMaxAndFixed {
display: -webkit-grid;
-webkit-grid-columns: minmax(45px, 30%) 15px;
-webkit-grid-rows: 12em minmax(35%, 10px);
font: 10px Ahem;
}
+.gridWithMinMaxAndMinMaxContent {
+ display: -webkit-grid;
+ -webkit-grid-columns: minmax(-webkit-min-content, 30%) 15px;
+ -webkit-grid-rows: 12em minmax(35%, -webkit-max-content);
+ font: 10px Ahem;
+}
</style>
<script src=""
</head>
@@ -73,7 +84,9 @@
<div class="gridWithThreeItems" id="gridWithThreeItems"></div>
<div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
<div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
<div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
<script src=""
<script src=""
</body>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2012-12-12 17:55:24 UTC (rev 137478)
@@ -46,6 +46,14 @@
-webkit-grid-columns: minmax(10%, 15px);
-webkit-grid-rows: minmax(20px, 50%);
}
+.gridWithMinContent {
+ -webkit-grid-columns: -webkit-min-content;
+ -webkit-grid-rows: -webkit-min-content;
+}
+.gridWithMaxContent {
+ -webkit-grid-columns: -webkit-max-content;
+ -webkit-grid-rows: -webkit-max-content;
+}
</style>
<script src=""
</head>
@@ -59,6 +67,8 @@
<div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
<div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
+<div class="grid gridWithMinContent" id="gridWithMinContent"></div>
+<div class="grid gridWithMaxContent" id="gridWithMaxContent"></div>
<script src=""
<script src=""
</body>
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2012-12-12 17:55:24 UTC (rev 137478)
@@ -29,10 +29,18 @@
shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-columns')", "'none'");
shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+var gridWithMinMaxContent = document.getElementById("gridWithMinMaxContent");
+shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-min-content -webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content -webkit-min-content'");
+
var gridWithMinMaxAndFixed = document.getElementById("gridWithMinMaxAndFixed");
shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-columns')", "'minmax(45px, 30%) 15px'");
shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-rows')", "'120px minmax(35%, 10px)'");
+var gridWithMinMaxAndMinMaxContent = document.getElementById("gridWithMinMaxAndMinMaxContent");
+shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-columns')", "'minmax(-webkit-min-content, 30%) 15px'");
+shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-rows')", "'120px minmax(35%, -webkit-max-content)'");
+
debug("");
debug("Test the initial value");
var element = document.createElement("div");
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (137477 => 137478)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2012-12-12 17:55:24 UTC (rev 137478)
@@ -29,6 +29,14 @@
shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-columns')", "'minmax(10%, 15px)'");
shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-rows')", "'minmax(20px, 50%)'");
+var gridWithMinContent = document.getElementById("gridWithMinContent");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-min-content'");
+
+var gridWithMaxContent = document.getElementById("gridWithMaxContent");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content'");
+
debug("");
debug("Test getting wrong values for -webkit-grid-columns and -webkit-grid-rows through CSS (they should resolve to the default: 'none')");
var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
@@ -76,6 +84,22 @@
element = document.createElement("div");
document.body.appendChild(element);
+element.style.webkitGridColumns = "-webkit-min-content";
+element.style.webkitGridRows = "-webkit-min-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-min-content'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "-webkit-max-content";
+element.style.webkitGridRows = "-webkit-max-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content'");
+
+debug("");
+debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows to minmax() values through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
element.style.webkitGridColumns = "minmax(55%, 45px)";
element.style.webkitGridRows = "minmax(30px, 40%)";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(55%, 45px)'");
@@ -89,6 +113,36 @@
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, 48px)'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(80px, 50px)'");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "minmax(-webkit-min-content, 8vh)";
+element.style.webkitGridRows = "minmax(10vw, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(-webkit-min-content, 48px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(80px, -webkit-min-content)'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.font = "10px Ahem";
+element.style.webkitGridColumns = "minmax(22em, -webkit-max-content)";
+element.style.webkitGridRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.font = "10px Ahem";
+element.style.webkitGridColumns = "minmax(22em, -webkit-max-content)";
+element.style.webkitGridRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "minmax(-webkit-min-content, -webkit-max-content)";
+element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
+
debug("");
debug("Test setting grid-columns and grid-rows to bad minmax value through JS");
element = document.createElement("div");
Modified: trunk/Source/WebCore/ChangeLog (137477 => 137478)
--- trunk/Source/WebCore/ChangeLog 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/Source/WebCore/ChangeLog 2012-12-12 17:55:24 UTC (rev 137478)
@@ -1,3 +1,23 @@
+2012-12-12 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Implement CSS parsing and handling for min-content and max-content
+ https://bugs.webkit.org/show_bug.cgi?id=104747
+
+ Reviewed by Alexis Menard.
+
+ This change adds -webkit-min-content and -webkit-max-content to our <track-breadth> parsing.
+ The rendering is not plugged in and will probably depend on bug 103311.
+
+ Tests: fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+ fast/css-grid-layout/grid-columns-rows-get-set.html:
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseGridBreadth):
+ * css/StyleResolver.cpp:
+ (WebCore::createGridTrackBreadth):
+ Straight-forward extension of the new code. We were already serializing back properly
+ so no need to touch CSSComputedStyleDeclaration.
+
2012-12-12 Ryosuke Niwa <[email protected]>
Copying text with ruby inserts new lines around rt elements
Modified: trunk/Source/WebCore/css/CSSParser.cpp (137477 => 137478)
--- trunk/Source/WebCore/css/CSSParser.cpp 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2012-12-12 17:55:24 UTC (rev 137478)
@@ -4590,6 +4590,9 @@
PassRefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue* currentValue)
{
+ if (currentValue->id == CSSValueWebkitMinContent || currentValue->id == CSSValueWebkitMaxContent)
+ return cssValuePool().createIdentifierValue(currentValue->id);
+
if (!validUnit(currentValue, FLength | FPercent))
return 0;
Modified: trunk/Source/WebCore/css/StyleResolver.cpp (137477 => 137478)
--- trunk/Source/WebCore/css/StyleResolver.cpp 2012-12-12 17:53:55 UTC (rev 137477)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2012-12-12 17:55:24 UTC (rev 137478)
@@ -2758,6 +2758,16 @@
static bool createGridTrackBreadth(CSSPrimitiveValue* primitiveValue, StyleResolver* selector, Length& workingLength)
{
+ if (primitiveValue->getIdent() == CSSValueWebkitMinContent) {
+ workingLength = Length(MinContent);
+ return true;
+ }
+
+ if (primitiveValue->getIdent() == CSSValueWebkitMaxContent) {
+ workingLength = Length(MaxContent);
+ return true;
+ }
+
workingLength = primitiveValue->convertToLength<FixedIntegerConversion | PercentConversion | ViewportPercentageConversion | AutoConversion>(selector->style(), selector->rootElementStyle(), selector->style()->effectiveZoom());
if (workingLength.isUndefined())
return false;
