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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2287113004: [css-grid] Implement fit-content track size (Closed)
Patch Set: Patch for landing Created 4 years, 3 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt ('k') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 description('Test that setting and getting grid-template-columns and grid-templa te-rows works as expected'); 1 description('Test that setting and getting grid-template-columns and grid-templa te-rows works as expected');
2 2
3 debug("Test getting grid-template-columns and grid-template-rows set through CSS "); 3 debug("Test getting grid-template-columns and grid-template-rows set through CSS ");
4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none" , "none"); 4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none" , "none");
5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px ", "15px"); 5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px ", "15px");
6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40 0px", "150px"); 6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40 0px", "150px");
7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px"); 7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");
8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWit hChildren"), "3.5px", "11px"); 8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWit hChildren"), "3.5px", "11px");
9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px"); 9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen t"), "0px", "0px"); 10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen t"), "0px", "0px");
11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme nt"), "7px", "11px"); 11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme nt"), "7px", "11px");
12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px"); 12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");
13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle ment"), "64px", "60px"); 13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle ment"), "64px", "60px");
14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80p x", "300px"); 14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80p x", "300px");
15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px"); 15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px");
16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildre nElement"), "17px", "11px"); 16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildre nElement"), "17px", "11px");
17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px"); 17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px");
18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildre nElement"), "17px", "11px"); 18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildre nElement"), "17px", "11px");
19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "8 00px", "600px"); 19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "8 00px", "600px");
20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px ", "75px"); 20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px ", "75px");
21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px"); 21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxEleme nt"), "80px", "300px"); 22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxEleme nt"), "80px", "300px");
23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM axElement"), "415px", "300px"); 23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM axElement"), "415px", "300px");
24 testGridDefinitionsValues(document.getElementById("gridWithAutoInsideMinMaxEleme nt"), "20px", "11px"); 24 testGridDefinitionsValues(document.getElementById("gridWithAutoInsideMinMaxEleme nt"), "20px", "11px");
25 testGridDefinitionsValues(document.getElementById("gridWithFitContentFunctionEle ment"), "7px", "11px");
25 26
26 debug(""); 27 debug("");
27 debug("Test getting wrong values for grid-template-columns and grid-template-row s through CSS (they should resolve to the default: 'none')"); 28 debug("Test getting wrong values for grid-template-columns and grid-template-row s through CSS (they should resolve to the default: 'none')");
28 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt"); 29 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt");
29 testGridDefinitionsValues(gridWithFitContentElement, "none", "none"); 30 testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
30 31
31 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE lement"); 32 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE lement");
32 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none"); 33 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none");
33 34
34 debug(""); 35 debug("");
35 debug("Test the initial value"); 36 debug("Test the initial value");
36 var element = document.createElement("div"); 37 var element = document.createElement("div");
37 document.body.appendChild(element); 38 document.body.appendChild(element);
38 testGridDefinitionsValues(element, "none", "none"); 39 testGridDefinitionsValues(element, "none", "none");
39 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns' )", "'none'"); 40 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns' )", "'none'");
40 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'"); 41 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
41 42
42 debug(""); 43 debug("");
43 debug("Test getting and setting grid-template-columns and grid-template-rows thr ough JS"); 44 debug("Test getting and setting grid-template-columns and grid-template-rows thr ough JS");
44 testGridDefinitionsSetJSValues("18px", "66px"); 45 testGridDefinitionsSetJSValues("18px", "66px");
45 testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px"); 46 testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px");
46 testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px"); 47 testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px");
47 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px"); 48 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px");
48 testGridDefinitionsSetJSValues("min-content", "min-content", "0px", "0px"); 49 testGridDefinitionsSetJSValues("min-content", "min-content", "0px", "0px");
49 testGridDefinitionsSetJSValues("max-content", "max-content", "0px", "0px"); 50 testGridDefinitionsSetJSValues("max-content", "max-content", "0px", "0px");
51 testGridDefinitionsSetJSValues("fit-content(100px)", "fit-content(25%)", "0px", "0px");
50 52
51 debug(""); 53 debug("");
52 debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS"); 54 debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
53 testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px" , "240px"); 55 testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px" , "240px");
54 testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px" , "80px"); 56 testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px" , "80px");
55 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con tent)", "48px", "80px"); 57 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con tent)", "48px", "80px");
56 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content, 5em)", "220px", "50px"); 58 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content, 5em)", "220px", "50px");
57 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c ontent, min-content)", "0px", "0px"); 59 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c ontent, min-content)", "0px", "0px");
58 testGridDefinitionsSetJSValues("minmax(auto, max-content)", "minmax(10vw, auto)" , "0px", "80px"); 60 testGridDefinitionsSetJSValues("minmax(auto, max-content)", "minmax(10vw, auto)" , "0px", "80px");
59 // Unit comparison should be case-insensitive. 61 // Unit comparison should be case-insensitive.
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
91 testGridDefinitionsSetBadJSValues("-1px", "-6em"); 93 testGridDefinitionsSetBadJSValues("-1px", "-6em");
92 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); 94 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)");
93 // Invalid expressions with calc 95 // Invalid expressions with calc
94 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)"); 96 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)");
95 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%("); 97 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%(");
96 // Forward slash not allowed if not part of a shorthand 98 // Forward slash not allowed if not part of a shorthand
97 testGridDefinitionsSetBadJSValues("10px /", "15px /"); 99 testGridDefinitionsSetBadJSValues("10px /", "15px /");
98 // Flexible lengths are invalid on the min slot of minmax(). 100 // Flexible lengths are invalid on the min slot of minmax().
99 testGridDefinitionsSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)"); 101 testGridDefinitionsSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
100 testGridDefinitionsSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)"); 102 testGridDefinitionsSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
103 testGridDefinitionsSetBadJSValues("fit-content(-10em)", "fit-content(-2px)");
104 testGridDefinitionsSetBadJSValues("fit-content(10px 2%)", "fit-content(5% 10em)" );
105 testGridDefinitionsSetBadJSValues("fit-content(max-content)", "fit-content(min-c ontent)");
106 testGridDefinitionsSetBadJSValues("fit-content(auto)", "fit-content(3fr)");
107 testGridDefinitionsSetBadJSValues("fit-content(repeat(2, 100px))", "fit-content( repeat(auto-fit), 1%)");
108 testGridDefinitionsSetBadJSValues("fit-content(fit-content(10px))", "fit-content (fit-content(30%))");
109 testGridDefinitionsSetBadJSValues("fit-content([a] 100px)", "fit-content(30px [b c])");
101 110
102 debug(""); 111 debug("");
103 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS"); 112 debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
104 testGridDefinitionsSetJSValues("18px", "66px"); 113 testGridDefinitionsSetJSValues("18px", "66px");
105 testGridDefinitionsSetJSValues("none", "none"); 114 testGridDefinitionsSetJSValues("none", "none");
106 115
107 function testInherit() 116 function testInherit()
108 { 117 {
109 var parentElement = document.createElement("div"); 118 var parentElement = document.createElement("div");
110 document.body.appendChild(parentElement); 119 document.body.appendChild(parentElement);
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
142 element.style.gridTemplateColumns = "initial"; 151 element.style.gridTemplateColumns = "initial";
143 element.style.gridTemplateRows = "initial"; 152 element.style.gridTemplateRows = "initial";
144 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); 153 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
145 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); 154 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
146 155
147 document.body.removeChild(element); 156 document.body.removeChild(element);
148 } 157 }
149 debug(""); 158 debug("");
150 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th rough JS"); 159 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th rough JS");
151 testInitial(); 160 testInitial();
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt ('k') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698