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

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: Patch for landing v2 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/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-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 }
36 .gridWithRepeat {
37 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%);
38 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last);
39 }
40 .gridWithEmptyParentheses {
41 grid-definition-columns: () 10px;
42 grid-definition-rows: 20px ( ) 50px ();
35 } 43 }
36 </style> 44 </style>
37 <script src="../../resources/js-test.js"></script> 45 <script src="../../resources/js-test.js"></script>
38 </head> 46 </head>
39 <body> 47 <body>
40 <div class="gridWithFixed" id="gridWithFixedElement"></div> 48 <div class="gridWithFixed" id="gridWithFixedElement"></div>
41 <div class="gridWithPercent" id="gridWithPercentElement"></div> 49 <div class="gridWithPercent" id="gridWithPercentElement"></div>
42 <div class="gridWithAuto" id="gridWithAutoElement"></div> 50 <div class="gridWithAuto" id="gridWithAutoElement"></div>
43 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> 51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
44 <div class="gridItem"></div> 52 <div class="gridItem"></div>
45 </div> 53 </div>
46 <div class="gridWithMinMax" id="gridWithMinMax"></div> 54 <div class="gridWithMinMax" id="gridWithMinMax"></div>
47 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
48 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div> 56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div>
57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
58 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
49 59
50 <script src="resources/grid-definitions-parsing-utils.js"></script> 60 <script src="resources/grid-definitions-parsing-utils.js"></script>
51 <script> 61 <script>
52 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 62 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');
53 63
54 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 64 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
55 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); 65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px");
56 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last"); 66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
57 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst auto", "auto last"); 67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) auto", "auto (last)");
58 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)");
59 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)");
60 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)");
72 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px");
61 73
62 debug(""); 74 debug("");
63 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 75 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"); 76 testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18 px", "66px (last)", "(first) 18px", "66px (last)");
65 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)");
66 testNonGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto ", "auto last", "first auto", "auto last"); 78 testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) au to", "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"); 79 testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last) ", "(first) min-content", "min-content (last)", "(first) min-content", "min-cont ent (last)");
68 testNonGridDefinitionsSetJSValues("'first' max-content", "max-content 'last' ", "first max-content", "max-content last", "first max-content", "max-content la st"); 80 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last) ", "(first) max-content", "max-content (last)", "(first) max-content", "max-cont ent (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"); 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)");
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"); 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)");
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"); 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)");
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"); 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)");
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"); 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)");
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");; 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)" );;
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"); 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)");
76 88
77 debug(""); 89 debug("");
78 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 90 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS");
79 element = document.createElement("div"); 91 element = document.createElement("div");
80 document.body.appendChild(element); 92 document.body.appendChild(element);
81 element.style.gridDefinitionColumns = "'foo'"; 93 element.style.gridDefinitionColumns = "'foo'";
82 element.style.gridDefinitionRows = "'bar"; 94 element.style.gridDefinitionRows = "'bar";
83 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
84 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); 96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
85 97
86 element = document.createElement("div"); 98 element = document.createElement("div");
87 document.body.appendChild(element); 99 document.body.appendChild(element);
88 element.style.gridDefinitionColumns = "'foo' 'bar'"; 100 element.style.gridDefinitionColumns = "'foo' 'bar'";
89 element.style.gridDefinitionRows = "'bar' 'foo'"; 101 element.style.gridDefinitionRows = "'bar' 'foo'";
90 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
91 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none"); 103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
92 </script> 104 </script>
93 </body> 105 </body>
94 </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