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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@named
Patch Set: Final patch for landing Created 7 years, 1 month 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 | « LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .grid { 10 .grid {
11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
12 width: 800px; 12 width: 800px;
13 height: 600px; 13 height: 600px;
14 } 14 }
15 .gridItem { 15 .gridItem {
16 grid-column: 1; 16 grid-column: 1;
17 grid-row: 1; 17 grid-row: 1;
18 height: 22px; 18 height: 22px;
19 width: 77px; 19 width: 77px;
20 } 20 }
21 .gridWithFixed { 21 .gridWithFixed {
22 grid-definition-columns: "first" 10px; 22 grid-definition-columns: (first) 10px;
23 grid-definition-rows: "first" 15px; 23 grid-definition-rows: (first) 15px;
24 } 24 }
25 .gridWithPercent { 25 .gridWithPercent {
26 grid-definition-columns: 53% "last"; 26 grid-definition-columns: 53% (last);
27 grid-definition-rows: 27% "last"; 27 grid-definition-rows: 27% (last);
28 } 28 }
29 .gridWithAuto { 29 .gridWithAuto {
30 grid-definition-columns: "first" auto; 30 grid-definition-columns: (first) auto;
31 grid-definition-rows: auto "last"; 31 grid-definition-rows: auto (last);
32 } 32 }
33 .gridWithMinMax { 33 .gridWithMinMax {
34 grid-definition-columns: "first" minmax(10%, 15px); 34 grid-definition-columns: (first) minmax(10%, 15px);
35 grid-definition-rows: minmax(20px, 50%) "last"; 35 grid-definition-rows: minmax(20px, 50%) (last);
36 } 36 }
37 .gridWithFixedMultiple { 37 .gridWithFixedMultiple {
38 grid-definition-columns: "first" "nav" 10px "last"; 38 grid-definition-columns: (first nav) 10px (last);
39 grid-definition-rows: "first" "nav" 15px "last"; 39 grid-definition-rows: (first nav) 15px (last);
40 } 40 }
41 .gridWithPercentageSameStringMultipleTimes { 41 .gridWithPercentageSameStringMultipleTimes {
42 grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; 42 grid-definition-columns: (first nav) 10% (nav) 15% (last);
43 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; 43 grid-definition-rows: (first nav2) 25% (nav2) 75% (last);
44 }
45 .gridWithRepeat {
46 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%);
47 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last);
48 }
49 .gridWithEmptyParentheses {
50 grid-definition-columns: () 10px;
51 grid-definition-rows: 20px ( ) 50px ();
52 }
53 .gridWithoutParentheses {
54 grid-definition-columns: first nav 10px;
55 grid-definition-rows: first 50% last;
56 }
57 .gridWithInvalidNestedParentheses {
58 grid-definition-columns: (first (nav)) 10px (last);
59 grid-definition-rows: (first) 50% (last (nav) nav2);
60 }
61 .gridWithUnbalancedParentheses {
62 grid-definition-columns: (first nav 10px;
63 grid-definition-rows: (first) 50% last);
64 }
65 .gridWithMisplacedParentheses {
66 grid-definition-columns: (first 10px) 50%;
67 grid-definition-rows: (first) (nav 50%);
44 } 68 }
45 </style> 69 </style>
46 <script src="../../resources/js-test.js"></script> 70 <script src="../../resources/js-test.js"></script>
47 </head> 71 </head>
48 <body> 72 <body>
49 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
50 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
51 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 75 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
52 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> 76 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
53 <div class="gridItem"></div> 77 <div class="gridItem"></div>
54 </div> 78 </div>
55 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> 79 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
56 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 80 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
57 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> 81 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
82 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
83 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
84 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div>
85 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare ntheses"></div>
86 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese s"></div>
87 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses" ></div>
58 88
59 <script src="resources/grid-definitions-parsing-utils.js"></script> 89 <script src="resources/grid-definitions-parsing-utils.js"></script>
60 <script> 90 <script>
61 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 91 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');
62 92
63 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 93 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
64 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); 94 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px");
65 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last"); 95 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px (last)", "162px (last)");
66 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last"); 96 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) 0px", "0px (last)");
67 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last"); 97 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "(first) 77px", "22px (last)");
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last"); 98 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) 80px", "300px (last)");
69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last"); 99 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last"); 100 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px ( nav2) 450px (last)");
101 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n av2) 150px (last)");
102 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px");
71 103
72 debug(""); 104 debug("");
73 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 105 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");
74 testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last"); 106 testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px" , "66px (last)", "(first) 18px", "66px (last)");
75 testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", " 240px last", "first 55%", "40% last"); 107 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)");
76 testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first 0px", " 0px last", "first auto", "auto last"); 108 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)");
77 testGridDefinitionsSetJSValues("'first' min-content", "min-content 'last'", "first 0px", "0px last", "first min-content", "min-content last"); 109 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) 0px", "0px (last)", "(first) min-content", "min-content (last)");
78 testGridDefinitionsSetJSValues("'first' max-content", "max-content 'last'", "first 0px", "0px last", "first max-content", "max-content last"); 110 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) 0px", "0px (last)", "(first) max-content", "max-content (last)");
79 testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40 %) 'last'", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px , 40%) last"); 111 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minma x(30px, 40%) (last)");
80 testGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minmax( max-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, max-c ontent)", "minmax(max-content, 5em) last"); 112 testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax( max-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)");
81 testGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minmax( min-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, min-c ontent)", "minmax(min-content, 5em) last"); 113 testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax( min-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)");
82 testGridDefinitionsSetJSValues("'first' minmax(min-content, max-content)", " minmax(max-content, min-content) 'last'", "first 0px", "0px last", "first minmax (min-content, max-content)", "minmax(max-content, min-content) last"); 114 testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", " minmax(max-content, min-content) (last)", "(first) 0px", "0px (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
83 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) las t", "first nav minmax(max-content, min-content) last"); 115 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) 0p x (last)", "(first nav) 0px (last)", "(first nav) minmax(min-content, max-conten t) (last)", "(first nav) minmax(max-content, min-content) (last)");
84 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2' m inmax(10px, 15px) 'last'", "first nav 0px nav 0px last", "first nav2 0px nav2 15 px last", "first nav minmax(min-content, max-content) nav auto last", "first nav 2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last"); 116 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minma x(10px, 15px) (last)", "(first nav) 0px (nav) 0px (last)", "(first nav2) 0px (na v2) 15px (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last )", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (la st)");
85 testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' ' bar' auto 'foo' auto 'bar'", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar ", "foo bar auto foo auto bar", "foo bar auto foo auto bar"); 117 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0 px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)") ;
118 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22 0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo o) 50% (baz)");
119
120 debug("");
121 debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS");
122 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none");
123 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare ntheses"), "none", "none");
124 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth eses"), "none", "none");
125 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe ses"), "none", "none");
86 126
87 debug(""); 127 debug("");
88 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 128 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS");
89 element = document.createElement("div"); 129 testGridDefinitionsSetBadJSValues("(foo)", "(bar");
90 document.body.appendChild(element); 130 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
91 element.style.display = "grid"; 131 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
92 element.style.gridDefinitionColumns = "'foo'"; 132 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em");
93 element.style.gridDefinitionRows = "'bar"; 133 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ;
94 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 134 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
96
97 element = document.createElement("div");
98 document.body.appendChild(element);
99 element.style.display = "grid";
100 element.style.gridDefinitionColumns = "'foo' 'bar'";
101 element.style.gridDefinitionRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
104 </script> 135 </script>
105 </body> 136 </body>
106 </html> 137 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698