Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(361)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 14786002: Allow defining named grid lines on the grid element (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Patch updated after Elliott's comments Created 7 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
Julien - ping for review 2013/05/06 19:59:01 Mhh, this should have been the HTML5 doctype. Will
2 <html>
3 <head>
4 <script>
5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script>
8 <link href="resources/grid.css" rel="stylesheet">
9 <style>
10 .gridWithFixed {
11 -webkit-grid-columns: "first" 10px;
12 -webkit-grid-rows: "first" 15px;
13 }
14 .gridWithPercent {
15 -webkit-grid-columns: 53% "last";
16 -webkit-grid-rows: 27% "last";
17 }
18 .gridWithAuto {
19 -webkit-grid-columns: "first" auto;
20 -webkit-grid-rows: auto "last";
21 }
22 .gridWithMinMax {
23 -webkit-grid-columns: "first" minmax(10%, 15px);
24 -webkit-grid-rows: minmax(20px, 50%) "last";
25 }
26 .gridWithFixedMultiple {
27 -webkit-grid-columns: "first" "nav" 10px "last";
28 -webkit-grid-rows: "first" "nav" 15px "last";
29 }
30 .gridWithPercentageSameStringMultipleTimes {
31 -webkit-grid-columns: "first" "nav" 10% "nav" 15% "last";
32 -webkit-grid-rows: "first" "nav2" 25% "nav2" 75% "last";
33 }
34 </style>
35 <script src="../js/resources/js-test-pre.js"></script>
36 </head>
37 <body>
38 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
39 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
40 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
41 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
42 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
43 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
44 <script>
45 description('Test that setting and getting grid-columns and grid-rows works as expected');
46
47 function testCSSValue(gridElementId, namedGridColumns, namedGridRows)
48 {
49 this.gridElement = document.getElementById(gridElementId);
50 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-gr id-columns')", namedGridColumns);
esprehn 2013/05/06 17:06:23 You can use shouldBeEqualToString() to get rid of
Julien - ping for review 2013/05/06 19:59:01 Done.
51 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-gr id-rows')", namedGridRows);
52 }
53
54 debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through C SS");
55 testCSSValue("gridWithFixedElement", "'first 10px'", "'first 15px'");
56 testCSSValue("gridWithPercentElement", "'53% last'", "'27% last'");
57 testCSSValue("gridWithAutoElement", "'first auto'", "'auto last'");
58 testCSSValue("gridWithMinMax", "'first minmax(10%, 15px)'", "'minmax(20px, 5 0%) last'");
59 testCSSValue("gridWithFixedMultiple", "'nav first 10px last'", "'nav first 1 5px last'");
60 testCSSValue("gridWithPercentageSameStringMultipleTimes", "'nav first 10% na v 15% last'", "'first nav2 25% nav2 75% last'");
61
62 debug("");
63 debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows t hrough JS");
64 var element = document.createElement("div");
65 document.body.appendChild(element);
66 element.style.webkitGridColumns = "'first' 18px";
67 element.style.webkitGridRows = "66px 'last'";
68 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first 18px'");
esprehn 2013/05/06 17:06:23 This should be testCSSvalue right? Seems like the
Julien - ping for review 2013/05/06 19:59:01 It is very close but not totally identical as test
69 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'66px last'");
70
71 element = document.createElement("div");
72 document.body.appendChild(element);
73 element.style.webkitGridColumns = "'first' 55%";
74 element.style.webkitGridRows = "40% 'last'";
75 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first 55%'");
76 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'40% last'");
77
78 element = document.createElement("div");
79 document.body.appendChild(element);
80 element.style.webkitGridColumns = "'first' auto";
81 element.style.webkitGridRows = "auto 'last'";
82 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first auto'");
83 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'auto last'");
84
85 element = document.createElement("div");
86 document.body.appendChild(element);
87 element.style.webkitGridColumns = "'first' -webkit-min-content";
88 element.style.webkitGridRows = "-webkit-min-content 'last'";
89 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first -webkit-min-content'");
90 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'-webkit-min-content last'");
91
92 element = document.createElement("div");
93 document.body.appendChild(element);
94 element.style.webkitGridColumns = "'first' -webkit-max-content";
95 element.style.webkitGridRows = "-webkit-max-content 'last'";
96 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first -webkit-max-content'");
97 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'-webkit-max-content last'");
98
99 element = document.createElement("div");
100 document.body.appendChild(element);
101 element.style.webkitGridColumns = "'first' minmax(55%, 45px)";
102 element.style.webkitGridRows = "minmax(30px, 40%) 'last'";
103 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(55%, 45px)'");
104 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(30px, 40%) last'");
105
106 element = document.createElement("div");
107 document.body.appendChild(element);
108 element.style.font = "10px Ahem";
109 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content) ";
110 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
111 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(220px, -webkit-max-content)'");
112 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, 50px) last'");
113
114 element = document.createElement("div");
115 document.body.appendChild(element);
116 element.style.font = "10px Ahem";
117 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content) ";
118 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
119 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(220px, -webkit-max-content)'");
120 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, 50px) last'");
121
122 element = document.createElement("div");
123 document.body.appendChild(element);
124 element.style.webkitGridColumns = "'first' minmax(-webkit-min-content, -webk it-max-content)";
125 element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-cont ent) 'last'";
126 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(-webkit-min-content, -webkit-max-content)'");
127 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, -webkit-min-content) last'");
128
129 element = document.createElement("div");
130 document.body.appendChild(element);
131 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'";
132 element.style.webkitGridRows = "'first' 'nav' minmax(-webkit-max-content, -w ebkit-min-content) 'last'";
133 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) last'");
134 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'nav first minmax(-webkit-max-content, -webkit-min-content) last'");
135
136 element = document.createElement("div");
137 document.body.appendChild(element);
138 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'";
139 element.style.webkitGridRows = "'first' 'nav2' minmax(-webkit-max-content, - webkit-min-content) 'nav2' minmax(10px, 15px) 'last'";
140 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) nav auto las t'");
141 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10 px, 15px) last'");
142
143 element = document.createElement("div");
144 document.body.appendChild(element);
145 element.style.webkitGridColumns = "'foo' 'bar' auto 'foo' auto 'bar'";
146 element.style.webkitGridRows = "'foo' 'bar' auto 'foo' auto 'bar'";
147 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'foo bar auto foo auto bar'");
148 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'foo bar auto foo auto bar'");
149
150 debug("");
151 debug("Test getting and setting invalid -webkit-grid-columns and -webkit-gri d-rows through JS");
152 element = document.createElement("div");
153 document.body.appendChild(element);
154 element.style.webkitGridColumns = "'foo'";
155 element.style.webkitGridRows = "'bar";
156 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'none'");
157 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'none'");
158 </script>
159 <script src="../js/resources/js-test-post.js"></script>
160 </body>
161 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698