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

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

Issue 179383003: [CSS Grid Layout] Disallow using <ident> and function names as <custom-ident> (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 9 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
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;
(...skipping 23 matching lines...) Expand all
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 .gridWithEmptyParentheses {
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 .gridWithAutoAsCustomIdent {
45 grid-template-columns: (auto) 10px 50px;
46 grid-template-rows: 50px (auto) 10px;
47 }
48 .gridWithMinmaxAsCustomIdent {
49 grid-template-columns: (minmax) 10px 50px;
50 grid-template-rows: 50px (minmax) 10px;
51 }
52 .gridWithSubgridAsCustomIdent {
53 grid-template-columns: (subgrid) 10px 50px;
54 grid-template-rows: 50px (subgrid) 10px;
55 }
44 </style> 56 </style>
45 <script src="../../resources/js-test.js"></script> 57 <script src="../../resources/js-test.js"></script>
46 </head> 58 </head>
47 <body> 59 <body>
48 <div class="gridWithFixed" id="gridWithFixedElement"></div> 60 <div class="gridWithFixed" id="gridWithFixedElement"></div>
49 <div class="gridWithPercent" id="gridWithPercentElement"></div> 61 <div class="gridWithPercent" id="gridWithPercentElement"></div>
50 <div class="gridWithAuto" id="gridWithAutoElement"></div> 62 <div class="gridWithAuto" id="gridWithAutoElement"></div>
51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> 63 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
52 <div class="gridItem"></div> 64 <div class="gridItem"></div>
53 </div> 65 </div>
54 <div class="gridWithMinMax" id="gridWithMinMax"></div> 66 <div class="gridWithMinMax" id="gridWithMinMax"></div>
55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 67 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div> 68 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam eStringMultipleTimes"></div>
57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div> 69 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
58 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> 70 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
71 <div class="gridWithAutoAsCustomIdent" id="gridWithAutoAsCustomIdent"></div>
72 <div class="gridWithMinmaxAsCustomIdent" id="gridWithMinmaxAsCustomIdent"></div>
73 <div class="gridWithSubgridAsCustomIdent" id="gridWithSubgridAsCustomIdent"></di v>
59 74
60 <script src="resources/grid-definitions-parsing-utils.js"></script> 75 <script src="resources/grid-definitions-parsing-utils.js"></script>
61 <script> 76 <script>
62 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); 77 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected');
63 78
64 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 79 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px"); 80 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px");
66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)"); 81 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) auto", "auto (last)"); 82 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) auto", "auto (last)");
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) minmax(10%, 15px)", "minmax(20px, 50%) (last)"); 83 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) minmax(10%, 15px)", "minmax(20px, 50%) (last)");
(...skipping 11 matching lines...) Expand all
80 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last) ", "(first) max-content", "max-content (last)", "(first) max-content", "max-cont ent (last)"); 95 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)"); 96 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)"); 97 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)"); 98 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)"); 99 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)"); 100 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)" );; 101 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)"); 102 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 103
89 debug(""); 104 debug("");
105 debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
106 testGridDefinitionsValues(document.getElementById("gridWithAutoAsCustomIdent "), "none", "none");
107 testGridDefinitionsValues(document.getElementById("gridWithMinmaxAsCustomIde nt"), "none", "none");
108 testGridDefinitionsValues(document.getElementById("gridWithSubgridAsCustomId ent"), "none", "none");
109
110 debug("");
90 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS"); 111 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
91 element = document.createElement("div"); 112 testGridDefinitionsSetBadJSValues("'foo'", "'bar'");
92 document.body.appendChild(element); 113 testGridDefinitionsSetBadJSValues("'foo' 'bar'", "'bar' 'foo'");
93 element.style.gridTemplateColumns = "'foo'";
94 element.style.gridTemplateRows = "'bar";
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none");
97
98 element = document.createElement("div");
99 document.body.appendChild(element);
100 element.style.gridTemplateColumns = "'foo' 'bar'";
101 element.style.gridTemplateRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- template-rows')", "none");
104 </script> 114 </script>
105 </body> 115 </body>
106 </html> 116 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698