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

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 1168453002: [CSSGridLayout] Switch from parentheses to brackets for grid line names (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing v2 Created 5 years, 6 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 | « LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/non-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
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-template-columns: (first) 10px; 13 grid-template-columns: [first] 10px;
14 grid-template-rows: (first) 15px; 14 grid-template-rows: [first] 15px;
15 } 15 }
16 .gridWithPercent { 16 .gridWithPercent {
17 grid-template-columns: 53% (last); 17 grid-template-columns: 53% [last];
18 grid-template-rows: 27% (last); 18 grid-template-rows: 27% [last];
19 } 19 }
20 .gridWithAuto { 20 .gridWithAuto {
21 grid-template-columns: (first) auto; 21 grid-template-columns: [first] auto;
22 grid-template-rows: auto (last); 22 grid-template-rows: auto [last];
23 } 23 }
24 .gridWithMinMax { 24 .gridWithMinMax {
25 grid-template-columns: (first) minmax(10%, 15px); 25 grid-template-columns: [first] minmax(10%, 15px);
26 grid-template-rows: minmax(20px, 50%) (last); 26 grid-template-rows: minmax(20px, 50%) [last];
27 } 27 }
28 .gridWithFixedMultiple { 28 .gridWithFixedMultiple {
29 grid-template-columns: (first nav) 10px (last); 29 grid-template-columns: [first nav] 10px [last];
30 grid-template-rows: (first nav) 15px (last); 30 grid-template-rows: [first nav] 15px [last];
31 } 31 }
32 .gridWithPercentageSameStringMultipleTimes { 32 .gridWithPercentageSameStringMultipleTimes {
33 grid-template-columns: (first nav) 10% (nav) 15% (last); 33 grid-template-columns: [first nav] 10% [nav] 15% [last];
34 grid-template-rows: (first nav2) 25% (nav2) 75% (last); 34 grid-template-rows: [first nav2] 25% [nav2] 75% [last];
35 } 35 }
36 .gridWithRepeat { 36 .gridWithRepeat {
37 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); 37 grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
38 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); 38 grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
39 } 39 }
40 .gridWithEmptyParentheses { 40 .gridWithEmptyBrackets {
41 grid-template-columns: () 10px; 41 grid-template-columns: [] 10px;
42 grid-template-rows: 20px ( ) 50px (); 42 grid-template-rows: 20px [ ] 50px [];
43 } 43 }
44 </style> 44 </style>
45 <script src="../../resources/js-test.js"></script> 45 <script src="../../resources/js-test.js"></script>
46 </head> 46 </head>
47 <body> 47 <body>
48 <div class="gridWithFixed" id="gridWithFixedElement"></div> 48 <div class="gridWithFixed" id="gridWithFixedElement"></div>
49 <div class="gridWithPercent" id="gridWithPercentElement"></div> 49 <div class="gridWithPercent" id="gridWithPercentElement"></div>
50 <div class="gridWithAuto" id="gridWithAutoElement"></div> 50 <div class="gridWithAuto" id="gridWithAutoElement"></div>
51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> 51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
52 <div class="gridItem"></div> 52 <div class="gridItem"></div>
53 </div> 53 </div>
54 <div class="gridWithMinMax" id="gridWithMinMax"></div> 54 <div class="gridWithMinMax" id="gridWithMinMax"></div>
55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div> 56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div>
57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div> 57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
58 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> 58 <div class="gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
59 59
60 <script src="resources/grid-definitions-parsing-utils.js"></script> 60 <script src="resources/grid-definitions-parsing-utils.js"></script>
61 <script> 61 <script>
62 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); 62 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected');
63 63
64 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 64 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px"); 65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px");
66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)"); 66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]");
67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) auto", "auto (last)"); 67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] auto", "auto [last]");
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) minmax(10%, 15px)", "minmax(20px, 50%) (last)"); 68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] minmax(10%, 15px)", "minmax(20px, 50%) [last]");
69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)"); 69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "(first nav) 10% (nav) 15% (last)", "(first nav2) 25% (nav2) 75% (last)"); 70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]");
71 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 50% (nav nav2) 50%", "100px (nav nav2) 25% (nav nav2) 2 5% (last)"); 71 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 50% [nav nav2] 50%", "100px [nav nav2] 25% [nav nav2] 2 5% [last]");
72 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px"); 72 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
73 73
74 debug(""); 74 debug("");
75 debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); 75 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
76 testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18 px", "66px (last)", "(first) 18px", "66px (last)"); 76 testNonGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18 px", "66px [last]", "[first] 18px", "66px [last]");
77 testNonGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 55%" , "40% (last)", "(first) 55%", "40% (last)"); 77 testNonGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 55%" , "40% [last]", "[first] 55%", "40% [last]");
78 testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) au to", "auto (last)", "(first) auto", "auto (last)"); 78 testNonGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] au to", "auto [last]", "[first] auto", "auto [last]");
79 testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last) ", "(first) min-content", "min-content (last)", "(first) min-content", "min-cont ent (last)"); 79 testNonGridDefinitionsSetJSValues("[first] min-content", "min-content [last] ", "[first] min-content", "min-content [last]", "[first] min-content", "min-cont ent [last]");
80 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last) ", "(first) max-content", "max-content (last)", "(first) max-content", "max-cont ent (last)"); 80 testNonGridDefinitionsSetJSValues("[first] max-content", "max-content [last] ", "[first] max-content", "max-content [last]", "[first] max-content", "max-cont ent [last]");
81 testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)"); 81 testNonGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
82 testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minm ax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max- content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content , 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "minmax(max-content, 50px) (last)"); 82 testNonGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minm ax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max- content, 50px) [last]", "[first] minmax(22em, max-content)", "minmax(max-content , 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "minmax(max-content, 50px) [last]");
83 testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minm ax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min- content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content , 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "minmax(min-content, 50px) (last)"); 83 testNonGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minm ax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min- content, 50px) [last]", "[first] minmax(22em, min-content)", "minmax(min-content , 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "minmax(min-content, 50px) [last]");
84 testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)" , "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-co ntent)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)"); 84 testNonGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)" , "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-co ntent)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
85 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte nt) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min- content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)"); 85 testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-conte nt) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min- content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
86 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) au to (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 1 5px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)" );; 86 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] au to [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 1 5px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]" );;
87 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)"); 87 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]");
88 88
89 debug(""); 89 debug("");
90 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS"); 90 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
91 element = document.createElement("div"); 91 element = document.createElement("div");
92 document.body.appendChild(element); 92 document.body.appendChild(element);
93 element.style.gridTemplateColumns = "'foo'"; 93 element.style.gridTemplateColumns = "'foo'";
94 element.style.gridTemplateRows = "'bar"; 94 element.style.gridTemplateRows = "'bar";
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none"); 95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none"); 96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none");
97 97
98 element = document.createElement("div"); 98 element = document.createElement("div");
99 document.body.appendChild(element); 99 document.body.appendChild(element);
100 element.style.gridTemplateColumns = "'foo' 'bar'"; 100 element.style.gridTemplateColumns = "'foo' 'bar'";
101 element.style.gridTemplateRows = "'bar' 'foo'"; 101 element.style.gridTemplateRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none"); 102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none"); 103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none");
104 </script> 104 </script>
105 </body> 105 </body>
106 </html> 106 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698