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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/non-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: New parsing based on rune's and jchaffraix's comments 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
« LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js » ('j') | no next file with comments »
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 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 .gridItem { 6 .gridItem {
7 grid-column: 1; 7 grid-column: 1;
8 grid-row: 1; 8 grid-row: 1;
9 height: 22px; 9 height: 22px;
10 width: 77px; 10 width: 77px;
11 } 11 }
12 .gridWithFixed { 12 .gridWithFixed {
13 grid-definition-columns: "first" 10px; 13 grid-definition-columns: (first) 10px;
14 grid-definition-rows: "first" 15px; 14 grid-definition-rows: (first) 15px;
15 } 15 }
16 .gridWithPercent { 16 .gridWithPercent {
17 grid-definition-columns: 53% "last"; 17 grid-definition-columns: 53% (last);
18 grid-definition-rows: 27% "last"; 18 grid-definition-rows: 27% (last);
19 } 19 }
20 .gridWithAuto { 20 .gridWithAuto {
21 grid-definition-columns: "first" auto; 21 grid-definition-columns: (first) auto;
22 grid-definition-rows: auto "last"; 22 grid-definition-rows: auto (last);
23 } 23 }
24 .gridWithMinMax { 24 .gridWithMinMax {
25 grid-definition-columns: "first" minmax(10%, 15px); 25 grid-definition-columns: (first) minmax(10%, 15px);
26 grid-definition-rows: minmax(20px, 50%) "last"; 26 grid-definition-rows: minmax(20px, 50%) (last);
27 } 27 }
28 .gridWithFixedMultiple { 28 .gridWithFixedMultiple {
29 grid-definition-columns: "first" "nav" 10px "last"; 29 grid-definition-columns: (first nav) 10px (last);
30 grid-definition-rows: "first" "nav" 15px "last"; 30 grid-definition-rows: (first nav) 15px (last);
31 } 31 }
32 .gridWithPercentageSameStringMultipleTimes { 32 .gridWithPercentageSameStringMultipleTimes {
33 grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; 33 grid-definition-columns: (first nav) 10% (nav) 15% (last);
34 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; 34 grid-definition-rows: (first nav2) 25% (nav2) 75% (last);
35 } 35 }
36 </style> 36 </style>
37 <script src="../../resources/js-test.js"></script> 37 <script src="../../resources/js-test.js"></script>
38 </head> 38 </head>
39 <body> 39 <body>
40 <div class="gridWithFixed" id="gridWithFixedElement"></div> 40 <div class="gridWithFixed" id="gridWithFixedElement"></div>
41 <div class="gridWithPercent" id="gridWithPercentElement"></div> 41 <div class="gridWithPercent" id="gridWithPercentElement"></div>
42 <div class="gridWithAuto" id="gridWithAutoElement"></div> 42 <div class="gridWithAuto" id="gridWithAutoElement"></div>
43 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> 43 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
44 <div class="gridItem"></div> 44 <div class="gridItem"></div>
45 </div> 45 </div>
46 <div class="gridWithMinMax" id="gridWithMinMax"></div> 46 <div class="gridWithMinMax" id="gridWithMinMax"></div>
47 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 47 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
48 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div> 48 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div>
49 49
50 <script src="resources/grid-definitions-parsing-utils.js"></script> 50 <script src="resources/grid-definitions-parsing-utils.js"></script>
51 <script> 51 <script>
52 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 52 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');
53 53
54 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 54 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
55 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); 55 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px");
56 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last"); 56 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last");
57 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst auto", "auto last"); 57 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst auto", "auto last");
58 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first minmax(10%, 15px)", "minmax(20px, 50%) last"); 58 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first minmax(10%, 15px)", "minmax(20px, 50%) last");
59 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last"); 59 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");
60 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 10% nav 15% last", "first nav2 25% nav2 75% last" ); 60 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 10% nav 15% last", "first nav2 25% nav2 75% last" );
61 61
62 debug(""); 62 debug("");
63 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 63 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");
64 testNonGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px ", "66px last", "first 18px", "66px last"); 64 testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "first 18px ", "66px last", "first 18px", "66px last");
65 testNonGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 55%", "40% last", "first 55%", "40% last"); 65 testNonGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "first 55%", "40% last", "first 55%", "40% last");
66 testNonGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto ", "auto last", "first auto", "auto last"); 66 testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "first auto ", "auto last", "first auto", "auto last");
67 testNonGridDefinitionsSetJSValues("'first' min-content", "min-content 'last' ", "first min-content", "min-content last", "first min-content", "min-content la st"); 67 testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last) ", "first min-content", "min-content last", "first min-content", "min-content la st");
68 testNonGridDefinitionsSetJSValues("'first' max-content", "max-content 'last' ", "first max-content", "max-content last", "first max-content", "max-content la st"); 68 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last) ", "first max-content", "max-content last", "first max-content", "max-content la st");
69 testNonGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minma x(55%, 45px)", "minmax(30px, 40%) last"); 69 testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minma x(55%, 45px)", "minmax(30px, 40%) last");
70 testNonGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minm ax(max-content, 5em) 'last'", "first minmax(220px, max-content)", "minmax(max-co ntent, 50px) last", "first minmax(22em, max-content)", "minmax(max-content, 5em) last", "first minmax(220px, max-content)", "minmax(max-content, 50px) last", "m inmax(max-content, 50px) last"); 70 testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minm ax(max-content, 5em) (last)", "first minmax(220px, max-content)", "minmax(max-co ntent, 50px) last", "first minmax(22em, max-content)", "minmax(max-content, 5em) last", "first minmax(220px, max-content)", "minmax(max-content, 50px) last", "m inmax(max-content, 50px) last");
71 testNonGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minm ax(min-content, 5em) 'last'", "first minmax(220px, min-content)", "minmax(min-co ntent, 50px) last", "first minmax(22em, min-content)", "minmax(min-content, 5em) last", "first minmax(220px, min-content)", "minmax(min-content, 50px) last", "m inmax(min-content, 50px) last"); 71 testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minm ax(min-content, 5em) (last)", "first minmax(220px, min-content)", "minmax(min-co ntent, 50px) last", "first minmax(22em, min-content)", "minmax(min-content, 5em) last", "first minmax(220px, min-content)", "minmax(min-content, 50px) last", "m inmax(min-content, 50px) last");
72 testNonGridDefinitionsSetJSValues("'first' minmax(min-content, max-content)" , "minmax(max-content, min-content) 'last'", "first minmax(min-content, max-cont ent)", "minmax(max-content, min-content) last", "first minmax(min-content, max-c ontent)", "minmax(max-content, min-content) last"); 72 testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)" , "minmax(max-content, min-content) (last)", "first minmax(min-content, max-cont ent)", "minmax(max-content, min-content) last", "first minmax(min-content, max-c ontent)", "minmax(max-content, min-content) last");
73 testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-con tent) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first n av minmax(min-content, max-content) last", "first nav minmax(max-content, min-co ntent) last", "first nav minmax(min-content, max-content) last", "first nav minm ax(max-content, min-content) last"); 73 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte nt) (last)", "(first nav) minmax(max-content, min-content) (last)", "first nav m inmax(min-content, max-content) last", "first nav minmax(max-content, min-conten t) last", "first nav minmax(min-content, max-content) last", "first nav minmax(m ax-content, min-content) last");
74 testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-con tent) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2 ' minmax(10px, 15px) 'last'", "first nav minmax(min-content, max-content) nav au to last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) l ast", "first nav minmax(min-content, max-content) nav auto last", "first nav2 mi nmax(max-content, min-content) nav2 minmax(10px, 15px) last");; 74 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte nt) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) mi nmax(10px, 15px) (last)", "first nav minmax(min-content, max-content) nav auto l ast", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last" , "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax (max-content, min-content) nav2 minmax(10px, 15px) last");;
75 testNonGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo ' 'bar' auto 'foo' auto 'bar'", "foo bar auto foo auto bar", "foo bar auto foo a uto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar"); 75 testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo b ar) auto (foo) auto (bar)", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
76 76
77 debug(""); 77 debug("");
78 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 78 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS");
79 element = document.createElement("div"); 79 element = document.createElement("div");
80 document.body.appendChild(element); 80 document.body.appendChild(element);
81 element.style.gridDefinitionColumns = "'foo'"; 81 element.style.gridDefinitionColumns = "'foo'";
82 element.style.gridDefinitionRows = "'bar"; 82 element.style.gridDefinitionRows = "'bar";
83 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 83 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
84 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); 84 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
85 85
86 element = document.createElement("div"); 86 element = document.createElement("div");
87 document.body.appendChild(element); 87 document.body.appendChild(element);
88 element.style.gridDefinitionColumns = "'foo' 'bar'"; 88 element.style.gridDefinitionColumns = "'foo' 'bar'";
89 element.style.gridDefinitionRows = "'bar' 'foo'"; 89 element.style.gridDefinitionRows = "'bar' 'foo'";
90 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 90 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
91 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); 91 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
92 </script> 92 </script>
93 </body> 93 </body>
94 </html> 94 </html>
OLDNEW
« LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698