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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js

Issue 149373004: [CSS Grid Layout] Implementation of the grid-template shorthand. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working
Patch Set: Adding checks and layout tests to verify misplaced 'none' arguments. Created 6 years, 10 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
« LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 description('Test that setting and getting grid-template-columns and grid-templa te-rows works as expected');
2
3 debug("Test getting grid-template shorthand set 'columns and rows' through CSS") ;
4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none" , "none", "none");
5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px ", "15px", "none");
6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40 0px", "150px", "none");
7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px", "none");
8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWit hChildren"), "7px", "11px", "none");
9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px", "none");
10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen t"), "0px", "0px", "none");
11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme nt"), "7px", "11px", "none");
12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px", "none");
13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle ment"), "64px", "60px", "none");
14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80p x", "300px", "none");
15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px", "none");
16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildre nElement"), "17px", "11px", "none");
17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px", "none");
18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildre nElement"), "17px", "11px", "none");
19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "8 00px", "600px", "none");
20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px ", "75px", "none");
21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px", "none");
22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxEleme nt"), "minmax(10%, 15px)", "minmax(20px, 50%)", "none", "80px", "300px");
23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM axElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "none", "415px", "300px" );
24
25 debug("");
26 debug("Test getting wrong values for grid-template shorthand 'columns and rows' through CSS (they should resolve to the default: 'none')");
27 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt");
28 testGridDefinitionsValues(gridWithFitContentElement, "none", "none", "none");
29
30 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE lement");
31 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none", "none");
32
33 debug("");
34 debug("Test the initial value");
35 var element = document.createElement("div");
36 document.body.appendChild(element);
37 testGridDefinitionsValues(element, "none", "none", "none");
38 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns' )", "'none'");
39 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
40 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')" , "'none'");
41
42 debug("");
43 debug("Test getting and setting grid-template shorthand 'columns and rows' throu gh JS");
44 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
45 testGridDefinitionsSetJSValues("55% / 40%", "440px", "240px", "none", "55%", "40 %");
46 testGridDefinitionsSetJSValues("auto / auto", "0px", "0px", "none", "auto", "aut o");
47 testGridDefinitionsSetJSValues("10vw / 25vh", "80px", "150px", "none", "10vw", " 25vh");
48 testGridDefinitionsSetJSValues("min-content / min-content", "0px", "0px", "none" , "min-content", "min-content");
49 testGridDefinitionsSetJSValues("max-content/ max-content", "0px", "0px", "none", "max-content", "max-content");
50
51 debug("");
52 debug("Test getting and setting grid-template shorthand 'columns and rows' to mi nmax() values through JS");
53 testGridDefinitionsSetJSValues("minmax(55%, 45px) / minmax(30px, 40%)", "440px", "240px", "none", "minmax(55%, 45px)", "minmax(30px, 40%)");
54 testGridDefinitionsSetJSValues("minmax(22em, 8vh) / minmax(10vw, 5em)", "220px", "80px", "none", "minmax(22em, 8vh)", "minmax(10vw, 5em)");
55 testGridDefinitionsSetJSValues("minmax(min-content, 8vh) / minmax(10vw, min-cont ent)", "48px", "80px", "none", "minmax(min-content, 8vh)", "minmax(10vw, min-con tent)");
56 testGridDefinitionsSetJSValues("minmax(22em, max-content) / minmax(max-content, 5em)", "220px", "50px", "none", "minmax(22em, max-content)", "minmax(max-content , 5em)");
57 testGridDefinitionsSetJSValues("minmax(min-content, max-content) / minmax(max-co ntent, min-content)", "0px", "0px", "none", "minmax(min-content, max-content)", "minmax(max-content, min-content)");
58 // Unit comparison should be case-insensitive.
59 testGridDefinitionsSetJSValues("3600Fr / 154fR", "800px", "600px", "none", "3600 fr", "154fr", "none");
60 // Float values are allowed.
61 testGridDefinitionsSetJSValues("3.1459fr / 2.718fr", "800px", "600px", "none", " 3.1459fr", "2.718fr");
62 // A leading '+' is allowed.
63 testGridDefinitionsSetJSValues("+3fr / +4fr", "800px", "600px", "none", "3fr", " 4fr", "none");
64
65 debug("");
66 debug("Test getting and setting grid-template shorthand 'columns and rows' to ca lc() values through JS");
67 testGridDefinitionsSetJSValues("calc(150px) / calc(75px)", "150px", "75px", "non e", "calc(150px)", "calc(75px)");
68 testGridDefinitionsSetJSValues("calc(50% - 30px) / calc(75px + 10%)", "370px", " 135px", "none", "calc(50% - 30px)", "calc(75px + 10%)");
69 testGridDefinitionsSetJSValues("minmax(25%, calc(30px)) / minmax(calc(75%), 40px )", "200px", "450px", "none", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px )", "none", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)");
70 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%)) / minmax(calc(25% - 50px), 200px)", "110px", "200px", "none", "minmax(10%, calc(30px + 10%))", "mi nmax(calc(25% - 50px), 200px)", "none", "minmax(10%, calc(30px + 10%))", "minmax (calc(25% - 50px), 200px)");
71
72 debug("");
73 debug("Test setting grid-template shorthand 'columns and rows' to bad values thr ough JS");
74 // No comma and only 1 argument provided.
75 testGridDefinitionsSetBadJSValues("minmax(10px 20px) / minmax(10px)")
76 // Nested minmax and only 2 arguments are allowed.
77 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px) / minmax(10p x, 20px, 30px)");
78 // No breadth value and no comma.
79 testGridDefinitionsSetBadJSValues("minmax() / minmax(30px 30% 30em)");
80 // Auto is not allowed inside minmax.
81 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh) / minmax(10vw, auto)");
82 testGridDefinitionsSetBadJSValues("-2fr / 3ffr");
83 testGridDefinitionsSetBadJSValues("-2.05fr / +-3fr");
84 testGridDefinitionsSetBadJSValues("0fr / 1r");
85 // A dimension doesn't allow spaces between the number and the unit.
86 testGridDefinitionsSetBadJSValues(".0000fr / 13 fr");
87 testGridDefinitionsSetBadJSValues("7.-fr / -8,0fr");
88 // Negative values are not allowed.
89 testGridDefinitionsSetBadJSValues("-1px / -6em");
90 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%) / minmax(2vw, -6em)");
91 // Invalid expressions with calc
92 testGridDefinitionsSetBadJSValues("calc(16px 30px) / calc(25px + auto)");
93 testGridDefinitionsSetBadJSValues("minmax(min-content, calc()) / calc(10%(");
94
95 debug("");
96 debug("Test setting grid-template shorthand back to 'none' through JS");
97 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
98 testGridDefinitionsSetJSValues("none", "none", "none", "none");
99
100 function testInherit()
101 {
102 var parentElement = document.createElement("div");
103 document.body.appendChild(parentElement);
104 parentElement.style.gridTemplate = "50px (last) / (first) 101%";
105
106 element = document.createElement("div");
107 parentElement.appendChild(element);
108 element.style.display = "grid";
109 element.style.height = "100px";
110 element.style.gridTemplate = "inherit";
111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'50px (last)'");
112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'(first) 101px'");
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
114
115 document.body.removeChild(parentElement);
116 }
117 debug("");
118 debug("Test setting grid-template shorthand to 'inherit' through JS");
119 testInherit();
120
121 function testInitial()
122 {
123 element = document.createElement("div");
124 document.body.appendChild(element);
125 element.style.display = "grid";
126 element.style.width = "300px";
127 element.style.height = "150px";
128 element.style.gridTemplateColumns = "150% (last)";
129 element.style.gridTemplateRows = "(first) 1fr";
130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'450px (last)'");
131 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'(first) 150px'");
132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
133
134 element.style.display = "grid";
135 element.style.gridTemplateColumns = "initial";
136 element.style.gridTemplateRows = "initial";
137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
140
141 document.body.removeChild(element);
142 }
143 debug("");
144 debug("Test setting grid-template shorthand to 'initial' through JS");
145 testInitial();
OLDNEW
« LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698