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

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 146773002: [CSS Grid Layout] Rename grid-definition-{columns|rows} to match the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixed renaming issues with some tests. Created 6 years, 10 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-definition-columns: (first) 10px; 13 grid-template-columns: (first) 10px;
14 grid-definition-rows: (first) 15px; 14 grid-template-rows: (first) 15px;
15 } 15 }
16 .gridWithPercent { 16 .gridWithPercent {
17 grid-definition-columns: 53% (last); 17 grid-template-columns: 53% (last);
18 grid-definition-rows: 27% (last); 18 grid-template-rows: 27% (last);
19 } 19 }
20 .gridWithAuto { 20 .gridWithAuto {
21 grid-definition-columns: (first) auto; 21 grid-template-columns: (first) auto;
22 grid-definition-rows: auto (last); 22 grid-template-rows: auto (last);
23 } 23 }
24 .gridWithMinMax { 24 .gridWithMinMax {
25 grid-definition-columns: (first) minmax(10%, 15px); 25 grid-template-columns: (first) minmax(10%, 15px);
26 grid-definition-rows: minmax(20px, 50%) (last); 26 grid-template-rows: minmax(20px, 50%) (last);
27 } 27 }
28 .gridWithFixedMultiple { 28 .gridWithFixedMultiple {
29 grid-definition-columns: (first nav) 10px (last); 29 grid-template-columns: (first nav) 10px (last);
30 grid-definition-rows: (first nav) 15px (last); 30 grid-template-rows: (first nav) 15px (last);
31 } 31 }
32 .gridWithPercentageSameStringMultipleTimes { 32 .gridWithPercentageSameStringMultipleTimes {
33 grid-definition-columns: (first nav) 10% (nav) 15% (last); 33 grid-template-columns: (first nav) 10% (nav) 15% (last);
34 grid-definition-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-definition-columns: (first) 10px repeat(2, (nav nav2) 50%); 37 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%);
38 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last); 38 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last);
39 } 39 }
40 .gridWithEmptyParentheses { 40 .gridWithEmptyParentheses {
41 grid-definition-columns: () 10px; 41 grid-template-columns: () 10px;
42 grid-definition-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="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></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-definition-columns and grid- definition-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-definition-columns and grid-definition-rows set thr ough 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("gridWithEmptyParentheses" ), "10px", "20px 50px");
73 73
74 debug(""); 74 debug("");
75 debug("Test getting and setting grid-definition-columns and grid-definition- 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-definition-columns and grid-def inition-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.gridDefinitionColumns = "'foo'"; 93 element.style.gridTemplateColumns = "'foo'";
94 element.style.gridDefinitionRows = "'bar"; 94 element.style.gridTemplateRows = "'bar";
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-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.gridDefinitionColumns = "'foo' 'bar'"; 100 element.style.gridTemplateColumns = "'foo' 'bar'";
101 element.style.gridDefinitionRows = "'bar' 'foo'"; 101 element.style.gridTemplateRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-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