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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html

Issue 22215002: Allow grid positions to be named grid areas (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-end-after-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 .grid {
7 grid-template: "firstArea" "secondArea"
8 "thirdArea" "thirdArea";
9 }
10
6 .gridItemWithPositiveInteger { 11 .gridItemWithPositiveInteger {
7 grid-column-end: 10; 12 grid-column-end: 10;
8 grid-row-end: 15; 13 grid-row-end: 15;
9 } 14 }
10 .gridItemWithNegativeInteger { 15 .gridItemWithNegativeInteger {
11 grid-column-end: -10; 16 grid-column-end: -10;
12 grid-row-end: -15; 17 grid-row-end: -15;
13 } 18 }
14 .gridItemWithBeforeSpan { 19 .gridItemWithBeforeSpan {
15 grid-column-end: span 2; 20 grid-column-end: span 2;
(...skipping 16 matching lines...) Expand all
32 grid-row-end: "last"; 37 grid-row-end: "last";
33 } 38 }
34 .gridItemWithSpanString { 39 .gridItemWithSpanString {
35 grid-column-end: "first" span; 40 grid-column-end: "first" span;
36 grid-row-end: span "last"; 41 grid-row-end: span "last";
37 } 42 }
38 .gridItemWithSpanNumberString { 43 .gridItemWithSpanNumberString {
39 grid-column-end: 2 "first" span; 44 grid-column-end: 2 "first" span;
40 grid-row-end: "last" 3 span; 45 grid-row-end: "last" 3 span;
41 } 46 }
47 .gridItemWithArea {
48 grid-column-end: firstArea;
49 grid-row-end: thirdArea;
50 }
42 </style> 51 </style>
43 <script src="resources/grid-item-column-row-parsing-utils.js"></script> 52 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
44 <script src="../js/resources/js-test-pre.js"></script> 53 <script src="../js/resources/js-test-pre.js"></script>
45 </head> 54 </head>
46 <body> 55 <body>
47 <div class="grid"> 56 <div class="grid">
48 <!-- The first has no properties set on it. --> 57 <!-- The first has no properties set on it. -->
49 <div id="gridElement"></div> 58 <div id="gridElement"></div>
50 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></ div> 59 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></ div>
51 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></ div> 60 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></ div>
52 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div> 61 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
53 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div> 62 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
54 <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div> 63 <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
55 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> 64 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
56 <div class="gridItemWithString" id="gridItemWithStringElement"></div> 65 <div class="gridItemWithString" id="gridItemWithStringElement"></div>
57 <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div > 66 <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div >
58 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringEl ement"></div> 67 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringEl ement"></div>
68 <div class="gridItemWithArea" id="gridItemWithArea"></div>
59 </div> 69 </div>
60 <script> 70 <script>
61 description('Test that setting and getting grid-column-end and grid-row-end works as expected'); 71 description('Test that setting and getting grid-column-end and grid-row-end works as expected');
62 72
63 debug("Test getting grid-column-end and grid-row-end set through CSS"); 73 debug("Test getting grid-column-end and grid-row-end set through CSS");
64 testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto"); 74 testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
65 testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15"); 75 testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
66 testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15"); 76 testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
67 testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / s pan 9"); 77 testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / s pan 9");
68 testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / sp an 9"); 78 testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / sp an 9");
69 testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / spa n 1"); 79 testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / spa n 1");
70 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 80 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
71 testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last"); 81 testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last");
72 testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 firs t", "auto / span 1 last"); 82 testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 firs t", "auto / span 1 last");
73 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last"); 83 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last");
84 testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thir dArea");
74 85
75 debug(""); 86 debug("");
76 debug("Test the initial value"); 87 debug("Test the initial value");
77 var element = document.createElement("div"); 88 var element = document.createElement("div");
78 document.body.appendChild(element); 89 document.body.appendChild(element);
79 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'"); 90 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
80 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 91 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
81 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'"); 92 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
82 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
83 94
84 debug(""); 95 debug("");
85 debug("Test getting and setting grid-column-end and grid-row-end through JS" ); 96 debug("Test getting and setting grid-column-end and grid-row-end through JS" );
86 testColumnEndRowEndJSParsing("18", "66"); 97 testColumnEndRowEndJSParsing("18", "66");
87 testColumnEndRowEndJSParsing("-55", "-40"); 98 testColumnEndRowEndJSParsing("-55", "-40");
88 testColumnEndRowEndJSParsing("'first'", "'last'", "1 first", "1 last"); 99 testColumnEndRowEndJSParsing("'first'", "'last'", "1 first", "1 last");
89 testColumnEndRowEndJSParsing("span 7", "span 2"); 100 testColumnEndRowEndJSParsing("span 7", "span 2");
90 testColumnEndRowEndJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last"); 101 testColumnEndRowEndJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last");
91 testColumnEndRowEndJSParsing("auto", "auto"); 102 testColumnEndRowEndJSParsing("auto", "auto");
103 testColumnEndRowEndJSParsing("thirdArea", "secondArea");
104 testColumnEndRowEndJSParsing("nonExistentArea", "secondArea", "nonExistentAr ea", "secondArea");
105 testColumnEndRowEndJSParsing("secondArea", "nonExistentArea", "secondArea", "nonExistentArea");
92 106
93 debug(""); 107 debug("");
94 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS"); 108 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS");
95 testColumnEndRowEndInheritJSParsing("inherit", "18"); 109 testColumnEndRowEndInheritJSParsing("inherit", "18");
96 testColumnEndRowEndInheritJSParsing("2", "inherit"); 110 testColumnEndRowEndInheritJSParsing("2", "inherit");
97 testColumnEndRowEndInheritJSParsing("inherit", "inherit"); 111 testColumnEndRowEndInheritJSParsing("inherit", "inherit");
98 112
99 debug(""); 113 debug("");
100 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS"); 114 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS");
101 testEndAfterInitialJSParsing(); 115 testEndAfterInitialJSParsing();
102 116
103 debug(""); 117 debug("");
104 debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS"); 118 debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
105 element.style.gridColumnEnd = "18"; 119 element.style.gridColumnEnd = "18";
106 element.style.gridRowEnd = "66"; 120 element.style.gridRowEnd = "66";
107 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'18'"); 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'18'");
108 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / 18'"); 122 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / 18'");
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " '66'"); 123 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " '66'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / 66'"); 124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / 66'");
111 element.style.gridColumnEnd = "auto"; 125 element.style.gridColumnEnd = "auto";
112 element.style.gridRowEnd = "auto"; 126 element.style.gridRowEnd = "auto";
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'"); 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'"); 129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
117 </script> 131 </script>
118 <script src="../js/resources/js-test-post.js"></script> 132 <script src="../js/resources/js-test-post.js"></script>
119 </body> 133 </body>
120 </html> 134 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698