Diff
Modified: trunk/LayoutTests/ChangeLog (136431 => 136432)
--- trunk/LayoutTests/ChangeLog 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/ChangeLog 2012-12-03 21:07:53 UTC (rev 136432)
@@ -1,3 +1,21 @@
+2012-12-03 Xan Lopez <[email protected]>
+
+ [CSS Grid Layout] Support <percentage> and viewport-relative breadth sizes
+ https://bugs.webkit.org/show_bug.cgi?id=103335
+
+ Reviewed by Julien Chaffraix.
+
+ * fast/css-grid-layout/breadth-size-resolution-grid-expected.txt: Added.
+ * fast/css-grid-layout/breadth-size-resolution-grid.html: Added.
+ * 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/percent-grid-item-in-percent-grid-track-expected.txt:
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid-expected.txt:
+ * 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-03 Max Vujovic <[email protected]>
[CSS Shaders] Do not clamp indirect array indices during CSS Shaders ANGLE validation pass
Added: trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid-expected.txt (0 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid-expected.txt 2012-12-03 21:07:53 UTC (rev 136432)
@@ -0,0 +1,5 @@
+Test that specifying the track breadth sizes works properly with all the allowed length types and in different writing modes.
+
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html (0 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html 2012-12-03 21:07:53 UTC (rev 136432)
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<style>
+.grid {
+ display: -webkit-grid;
+ background-color: grey;
+ -webkit-grid-columns: 100px 10vw;
+ -webkit-grid-rows: 10vh 100px;
+}
+
+#a {
+ background-color: blue;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 1;
+ width: 100%;
+ height: 100%;
+}
+
+#b {
+ background-color: lime;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 1;
+ width: 100%;
+ height: 100%;
+}
+
+#c {
+ background-color: purple;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 2;
+ width: 100%;
+ height: 100%;
+}
+
+#d {
+ background-color: orange;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 2;
+ width: 100%;
+ height: 100%;
+}
+
+.verticalRL {
+ -webkit-writing-mode: vertical-rl;
+}
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>Test that specifying the track breadth sizes works properly with all the allowed length types and in different writing modes.</p>
+
+<div class="grid">
+ <div id="a" data-expected-width="100" data-expected-height="60"></div>
+ <div id="b" data-expected-width="80" data-expected-height="60"></div>
+ <div id="c" data-expected-width="100" data-expected-height="100"></div>
+ <div id="d" data-expected-width="80" data-expected-height="100"></div>
+</div>
+
+<div class="grid verticalRL">
+ <div id="a" data-expected-width="60" data-expected-height="100"></div>
+ <div id="b" data-expected-width="60" data-expected-height="80"></div>
+ <div id="c" data-expected-width="100" data-expected-height="100"></div>
+ <div id="d" data-expected-width="100" data-expected-height="80"></div>
+</div>
+
+<div class="grid">
+ <div id="a" class="verticalRL" data-expected-width="100" data-expected-height="60"></div>
+ <div id="b" data-expected-width="80" data-expected-height="60"></div>
+ <div id="c" class="verticalRL" data-expected-width="100" data-expected-height="100"></div>
+ <div id="d" data-expected-width="80" data-expected-height="100"></div>
+</div>
+
+</body>
+</html>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2012-12-03 21:07:53 UTC (rev 136432)
@@ -4,8 +4,8 @@
Test getting |display| set through CSS
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-columns') is 'none'
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-rows') is 'none'
+PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-columns') is 'none'
+PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-rows') is 'none'
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-columns') is '10px'
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-rows') is '15px'
PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-columns') is '53%'
@@ -14,6 +14,12 @@
PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-rows') is 'auto'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-columns') is '100px'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-rows') is '150px'
+PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-columns') is '64px'
+PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-rows') is '60px'
+PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-columns') is 'none'
+PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-rows') is 'none'
+PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-columns') is 'none'
+PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-rows') is 'none'
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
@@ -26,6 +32,8 @@
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is '40%'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'auto'
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'
Test setting grid-columns and grid-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is '18px'
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2012-12-03 21:07:53 UTC (rev 136432)
@@ -14,6 +14,10 @@
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-rows') is '150px 170px'
PASS getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-columns') is '15px auto 100px'
PASS getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-rows') is '120px 18px auto'
+PASS getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-columns') is '50% 120px'
+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'
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
@@ -46,6 +50,10 @@
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is '50% 96px'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is '5% 510px'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows') is 'none'
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2012-12-03 21:07:53 UTC (rev 136432)
@@ -44,6 +44,16 @@
-webkit-grid-rows: 12em 18px auto;
font: 10px Ahem;
}
+.gridWithPercentAndViewportPercent {
+ display: -webkit-grid;
+ -webkit-grid-columns: 50% 15vw;
+ -webkit-grid-rows: 35% 28vh;
+}
+.gridWithFitContentAndFitAvailable {
+ display: -webkit-grid;
+ -webkit-grid-columns: -webkit-content-available;
+ -webkit-grid-rows: -webkit-fitcontent -webkit-fit-available;
+}
</style>
<script src=""
</head>
@@ -55,6 +65,8 @@
<div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
<div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
<div class="gridWithThreeItems" id="gridWithThreeItems"></div>
+<div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
+<div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
<script src=""
<script src=""
</body>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2012-12-03 21:07:53 UTC (rev 136432)
@@ -8,39 +8,52 @@
<style>
.grid {
display: -webkit-grid;
+}
+.gridWithNone {
-webkit-grid-columns: none;
-webkit-grid-rows: none;
}
.gridWithFixed {
- display: -webkit-grid;
-webkit-grid-columns: 10px;
-webkit-grid-rows: 15px;
}
.gridWithPercent {
- display: -webkit-grid;
-webkit-grid-columns: 53%;
-webkit-grid-rows: 27%;
}
.gridWithAuto {
- display: -webkit-grid;
-webkit-grid-columns: auto;
-webkit-grid-rows: auto;
}
.gridWithEM {
- display: -webkit-grid;
-webkit-grid-columns: 10em;
-webkit-grid-rows: 15em;
font: 10px Ahem;
}
+.gridWithViewPortPercentage {
+ -webkit-grid-columns: 8vw;
+ -webkit-grid-rows: 10vh;
+}
+.gridWithFitContent {
+ -webkit-grid-columns: -webkit-fit-content;
+ -webkit-grid-rows: -webkit-fit-content;
+}
+.gridWithFitAvailable {
+ -webkit-grid-columns: -webkit-fit-available;
+ -webkit-grid-rows: -webkit-fit-available;
+}
</style>
<script src=""
</head>
<body>
-<div class="grid" id="gridElement"></div>
-<div class="gridWithFixed" id="gridWithFixedElement"></div>
-<div class="gridWithPercent" id="gridWithPercentElement"></div>
-<div class="gridWithAuto" id="gridWithAutoElement"></div>
-<div class="gridWithEM" id="gridWithEMElement"></div>
+<div class="grid gridWithNone" id="gridWithNoneElement"></div>
+<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid gridWithEM" id="gridWithEMElement"></div>
+<div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
+<div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
+<div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
<script src=""
<script src=""
</body>
Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-expected.txt (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-expected.txt 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-expected.txt 2012-12-03 21:07:53 UTC (rev 136432)
@@ -1,58 +1,6 @@
Test that percentage sized grid items inside percentage sized grid tracks get properly sized.
-FAIL:
-Expected 160 for width, but got 0.
-Expected 90 for height, but got 0.
-Expected 80 for width, but got 0.
-Expected 105 for height, but got 0.
-Expected 240 for width, but got 0.
-Expected 210 for height, but got 0.
-
-<div class="grid" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="160" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="90"></div>
- <div id="c" data-expected-width="80" data-expected-height="105"></div>
- <div id="d" data-expected-width="240" data-expected-height="210"></div>
-</div>
-FAIL:
-Expected 160 for width, but got 0.
-Expected 90 for height, but got 0.
-Expected 80 for width, but got 0.
-Expected 105 for height, but got 0.
-Expected 240 for width, but got 0.
-Expected 210 for height, but got 0.
-
-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="160" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="90"></div>
- <div id="c" data-expected-width="80" data-expected-height="105"></div>
- <div id="d" data-expected-width="240" data-expected-height="210"></div>
-</div>
-FAIL:
-Expected 120 for width, but got 0.
-Expected 180 for height, but got 0.
-Expected 140 for width, but got 0.
-Expected 60 for height, but got 0.
-Expected 280 for width, but got 0.
-Expected 180 for height, but got 0.
-
-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="120" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="180"></div>
- <div id="c" data-expected-width="140" data-expected-height="60"></div>
- <div id="d" data-expected-width="280" data-expected-height="180"></div>
-</div>
-FAIL:
-Expected 120 for width, but got 0.
-Expected 180 for height, but got 0.
-Expected 140 for width, but got 0.
-Expected 60 for height, but got 0.
-Expected 280 for width, but got 0.
-Expected 180 for height, but got 0.
-
-<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="120" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="180"></div>
- <div id="c" data-expected-width="140" data-expected-height="60"></div>
- <div id="d" data-expected-width="280" data-expected-height="180"></div>
-</div>
+PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid-expected.txt (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid-expected.txt 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid-expected.txt 2012-12-03 21:07:53 UTC (rev 136432)
@@ -1,66 +1,6 @@
Test that percentage sized grid items inside percentage sized grid tracks inside a percentage size grid get properly sized.
-FAIL:
-Expected 160 for width, but got 0.
-Expected 90 for height, but got 0.
-Expected 80 for width, but got 0.
-Expected 105 for height, but got 0.
-Expected 240 for width, but got 0.
-Expected 210 for height, but got 0.
-
-<div class="container">
-<div class="grid" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="160" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="90"></div>
- <div id="c" data-expected-width="80" data-expected-height="105"></div>
- <div id="d" data-expected-width="240" data-expected-height="210"></div>
-</div>
-</div>
-FAIL:
-Expected 160 for width, but got 0.
-Expected 90 for height, but got 0.
-Expected 80 for width, but got 0.
-Expected 105 for height, but got 0.
-Expected 240 for width, but got 0.
-Expected 210 for height, but got 0.
-
-<div class="container">
-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="160" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="90"></div>
- <div id="c" data-expected-width="80" data-expected-height="105"></div>
- <div id="d" data-expected-width="240" data-expected-height="210"></div>
-</div>
-</div>
-FAIL:
-Expected 120 for width, but got 0.
-Expected 180 for height, but got 0.
-Expected 140 for width, but got 0.
-Expected 60 for height, but got 0.
-Expected 280 for width, but got 0.
-Expected 180 for height, but got 0.
-
-<div class="container">
-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="120" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="180"></div>
- <div id="c" data-expected-width="140" data-expected-height="60"></div>
- <div id="d" data-expected-width="280" data-expected-height="180"></div>
-</div>
-</div>
-FAIL:
-Expected 120 for width, but got 0.
-Expected 180 for height, but got 0.
-Expected 140 for width, but got 0.
-Expected 60 for height, but got 0.
-Expected 280 for width, but got 0.
-Expected 180 for height, but got 0.
-
-<div class="container">
-<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
- <div id="a" data-expected-width="120" data-expected-height="15"></div>
- <div id="b" data-expected-width="15" data-expected-height="180"></div>
- <div id="c" data-expected-width="140" data-expected-height="60"></div>
- <div id="d" data-expected-width="280" data-expected-height="180"></div>
-</div>
-</div>
+PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2012-12-03 21:07:53 UTC (rev 136432)
@@ -21,6 +21,14 @@
shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-columns')", "'15px auto 100px'");
shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-rows')", "'120px 18px auto'");
+var gridWithPercentAndViewportPercent = document.getElementById("gridWithPercentAndViewportPercent");
+shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-columns')", "'50% 120px'");
+shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-rows')", "'35% 168px'");
+
+var gridWithFitContentAndFitAvailable = document.getElementById("gridWithFitContentAndFitAvailable");
+shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+
debug("");
debug("Test the initial value");
var element = document.createElement("div");
@@ -103,3 +111,17 @@
element.style.webkitGridRows = "auto 18em none";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "50% 12vw";
+element.style.webkitGridRows = "5% 85vh";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'50% 96px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'5% 510px'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "-webkit-fit-content -webkit-fit-content";
+element.style.webkitGridRows = "-webkit-fit-available -webkit-fit-available";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (136431 => 136432)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2012-12-03 21:07:53 UTC (rev 136432)
@@ -1,9 +1,9 @@
description('Test that setting and getting grid-columns and grid-rows works as expected');
-debug("Test getting |display| set through CSS");
-var gridElement = document.getElementById("gridElement");
-shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through CSS");
+var gridWithNoneElement = document.getElementById("gridWithNoneElement");
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
var gridWithFixedElement = document.getElementById("gridWithFixedElement");
shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-columns')", "'10px'");
@@ -21,6 +21,19 @@
shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-columns')", "'100px'");
shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-rows')", "'150px'");
+var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPortPercentageElement");
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-columns')", "'64px'");
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-rows')", "'60px'");
+
+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");
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+
+var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+
debug("");
debug("Test the initial value");
var element = document.createElement("div");
@@ -49,6 +62,13 @@
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'auto'");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.webkitGridColumns = "10vw";
+element.style.webkitGridRows = "25vh";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'80px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'150px'");
+
debug("");
debug("Test setting grid-columns and grid-rows back to 'none' through JS");
element.style.webkitGridColumns = "18px";
Modified: trunk/Source/WebCore/ChangeLog (136431 => 136432)
--- trunk/Source/WebCore/ChangeLog 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/Source/WebCore/ChangeLog 2012-12-03 21:07:53 UTC (rev 136432)
@@ -1,3 +1,24 @@
+2012-12-03 Xan Lopez <[email protected]>
+
+ [CSS Grid Layout] Support <percentage> and viewport-relative breadth sizes
+ https://bugs.webkit.org/show_bug.cgi?id=103335
+
+ Reviewed by Julien Chaffraix.
+
+ Test: fast/css-grid-layout/breadth-size-resolution-grid.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForGridTrackBreadth): Support the new types.
+ (WebCore::valueForGridTrackMinMax): Modify the call to previous
+ method, since the signature has changed.
+ (WebCore::valueForGridTrackGroup): Ditto.
+ (WebCore::valueForGridTrackList): Ditto.
+ (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): Ditto.
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computedUsedBreadthOfGridTracks): Suport
+ percent and viewport relative types, calc() will be supported in a
+ follow up (see bug #103761)
+
2012-12-03 Peter Rybin <[email protected]>
Web Inspector: make ASSERTION FAILED: foundPropertiesCount == object->size() more useful
Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (136431 => 136432)
--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2012-12-03 21:07:53 UTC (rev 136432)
@@ -999,35 +999,35 @@
}
#endif
-static PassRefPtr<CSSValue> valueForGridTrackBreadth(const GridTrackSize& trackSize, const RenderStyle* style)
+static PassRefPtr<CSSValue> valueForGridTrackBreadth(const GridTrackSize& trackSize, const RenderStyle* style, RenderView *renderView)
{
- if (trackSize.length().isPercent())
- return cssValuePool().createValue(trackSize.length());
if (trackSize.length().isAuto())
return cssValuePool().createIdentifierValue(CSSValueAuto);
- return zoomAdjustedPixelValue(trackSize.length().value(), style);
+ if (trackSize.length().isViewportPercentage())
+ return zoomAdjustedPixelValue(valueForLength(trackSize.length(), 0, renderView), style);
+ return zoomAdjustedPixelValueForLength(trackSize.length(), style);
}
-static PassRefPtr<CSSValue> valueForGridTrackMinMax(const GridTrackSize& trackSize, const RenderStyle* style)
+static PassRefPtr<CSSValue> valueForGridTrackMinMax(const GridTrackSize& trackSize, const RenderStyle* style, RenderView* renderView)
{
- return valueForGridTrackBreadth(trackSize, style);
+ return valueForGridTrackBreadth(trackSize, style, renderView);
}
-static PassRefPtr<CSSValue> valueForGridTrackGroup(const Vector<GridTrackSize>& trackSizes, const RenderStyle* style)
+static PassRefPtr<CSSValue> valueForGridTrackGroup(const Vector<GridTrackSize>& trackSizes, const RenderStyle* style, RenderView* renderView)
{
RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
for (size_t i = 0; i < trackSizes.size(); ++i)
- list->append(valueForGridTrackMinMax(trackSizes[i], style));
+ list->append(valueForGridTrackMinMax(trackSizes[i], style, renderView));
return list.release();
}
-static PassRefPtr<CSSValue> valueForGridTrackList(const Vector<GridTrackSize>& trackSizes, const RenderStyle* style)
+static PassRefPtr<CSSValue> valueForGridTrackList(const Vector<GridTrackSize>& trackSizes, const RenderStyle* style, RenderView *renderView)
{
// Handle the 'none' case here.
if (!trackSizes.size())
return cssValuePool().createIdentifierValue(CSSValueNone);
- return valueForGridTrackGroup(trackSizes, style);
+ return valueForGridTrackGroup(trackSizes, style, renderView);
}
static PassRefPtr<CSSValue> valueForGridPosition(const GridPosition& position)
@@ -1840,10 +1840,10 @@
return list.release();
}
case CSSPropertyWebkitGridColumns: {
- return valueForGridTrackList(style->gridColumns(), style.get());
+ return valueForGridTrackList(style->gridColumns(), style.get(), m_node->document()->renderView());
}
case CSSPropertyWebkitGridRows: {
- return valueForGridTrackList(style->gridRows(), style.get());
+ return valueForGridTrackList(style->gridRows(), style.get(), m_node->document()->renderView());
}
case CSSPropertyWebkitGridColumn:
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (136431 => 136432)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2012-12-03 21:05:27 UTC (rev 136431)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2012-12-03 21:07:53 UTC (rev 136432)
@@ -141,8 +141,10 @@
const Vector<GridTrackSize>& trackStyles = (direction == ForColumns) ? style()->gridColumns() : style()->gridRows();
for (size_t i = 0; i < trackStyles.size(); ++i) {
GridTrack track;
- if (trackStyles[i].length().isFixed())
- track.m_usedBreadth = trackStyles[i].length().getFloatValue();
+ Length trackLength = trackStyles[i].length();
+ // FIXME: we stil need to support calc() here (bug 103761)
+ if (trackLength.isFixed() || trackLength.isPercent() || trackLength.isViewportPercentage())
+ track.m_usedBreadth = valueForLength(trackLength, direction == ForColumns ? logicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style()->logicalHeight()), view());
else
notImplemented();
