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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-start-before-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-end-after-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-start-before-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-start: 10; 12 grid-column-start: 10;
8 grid-row-start: 15; 13 grid-row-start: 15;
9 } 14 }
10 .gridItemWithNegativeInteger { 15 .gridItemWithNegativeInteger {
11 grid-column-start: -10; 16 grid-column-start: -10;
12 grid-row-start: -15; 17 grid-row-start: -15;
13 } 18 }
14 .gridItemWithBeforeSpan { 19 .gridItemWithBeforeSpan {
15 grid-column-start: span 2; 20 grid-column-start: span 2;
(...skipping 16 matching lines...) Expand all
32 grid-row-start: "last"; 37 grid-row-start: "last";
33 } 38 }
34 .gridItemWithSpanString { 39 .gridItemWithSpanString {
35 grid-column-start: "first" span; 40 grid-column-start: "first" span;
36 grid-row-start: span "last"; 41 grid-row-start: span "last";
37 } 42 }
38 .gridItemWithSpanNumberString { 43 .gridItemWithSpanNumberString {
39 grid-column-start: 2 "first" span; 44 grid-column-start: 2 "first" span;
40 grid-row-start: "last" 3 span; 45 grid-row-start: "last" 3 span;
41 } 46 }
47 .gridItemWithArea {
48 grid-column-start: firstArea;
49 grid-row-start: 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-start and grid-row-st art works as expected'); 71 description('Test that setting and getting grid-column-start and grid-row-st art works as expected');
62 72
63 debug("Test getting grid-column-start and grid-row-start set through CSS"); 73 debug("Test getting grid-column-start and grid-row-start set through CSS");
64 var gridElement = document.getElementById("gridElement"); 74 var gridElement = document.getElementById("gridElement");
65 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-st art')", "'auto'"); 75 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-st art')", "'auto'");
66 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')" , "'auto / auto'"); 76 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')" , "'auto / auto'");
67 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start ')", "'auto'"); 77 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start ')", "'auto'");
68 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", " 'auto / auto'"); 78 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", " 'auto / auto'");
69 79
70 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to"); 80 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to");
71 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto"); 81 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
72 testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto"); 82 testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto");
73 testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto"); 83 testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto");
74 testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / a uto"); 84 testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / a uto");
75 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 85 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
76 testColumnRowCSSParsing("gridItemWithStringElement", "1 first / auto", "1 la st / auto"); 86 testColumnRowCSSParsing("gridItemWithStringElement", "1 first / auto", "1 la st / auto");
77 testColumnRowCSSParsing("gridItemWithSpanStringElement", "span 1 first / aut o", "span 1 last / auto"); 87 testColumnRowCSSParsing("gridItemWithSpanStringElement", "span 1 first / aut o", "span 1 last / auto");
78 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "span 2 first / auto", "span 3 last / auto"); 88 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "span 2 first / auto", "span 3 last / auto");
89 testColumnRowCSSParsing("gridItemWithArea", "firstArea / auto", "thirdArea / auto");
79 90
80 debug(""); 91 debug("");
81 debug("Test the initial value"); 92 debug("Test the initial value");
82 var element = document.createElement("div"); 93 var element = document.createElement("div");
83 document.body.appendChild(element); 94 document.body.appendChild(element);
84 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'"); 95 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
85 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 96 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'"); 97 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 98 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
88 99
89 debug(""); 100 debug("");
90 debug("Test getting and setting grid-column-start and grid-row-start through JS"); 101 debug("Test getting and setting grid-column-start and grid-row-start through JS");
91 testColumnStartRowStartJSParsing("18", "66"); 102 testColumnStartRowStartJSParsing("18", "66");
92 testColumnStartRowStartJSParsing("-55", "-40"); 103 testColumnStartRowStartJSParsing("-55", "-40");
93 testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last"); 104 testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last");
94 testColumnStartRowStartJSParsing("span 3", "span 20"); 105 testColumnStartRowStartJSParsing("span 3", "span 20");
95 testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last"); 106 testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last");
96 testColumnStartRowStartJSParsing("auto", "auto"); 107 testColumnStartRowStartJSParsing("auto", "auto");
108 testColumnStartRowStartJSParsing("thirdArea", "secondArea");
109 testColumnStartRowStartJSParsing("nonExistentArea", "secondArea", "nonExiste ntArea", "secondArea");
110 testColumnStartRowStartJSParsing("secondArea", "nonExistentArea", "secondAre a", "nonExistentArea");
97 111
98 debug(""); 112 debug("");
99 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS"); 113 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS");
100 testColumnStartRowStartInheritJSParsing("inherit", "18"); 114 testColumnStartRowStartInheritJSParsing("inherit", "18");
101 testColumnStartRowStartInheritJSParsing("2", "inherit"); 115 testColumnStartRowStartInheritJSParsing("2", "inherit");
102 testColumnStartRowStartInheritJSParsing("inherit", "inherit"); 116 testColumnStartRowStartInheritJSParsing("inherit", "inherit");
103 117
104 debug(""); 118 debug("");
105 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS"); 119 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS");
106 testColumnStartRowStartInitialJSParsing(); 120 testColumnStartRowStartInitialJSParsing();
107 121
108 debug(""); 122 debug("");
109 debug("Test setting grid-column-start and grid-row-start back to 'auto' thro ugh JS"); 123 debug("Test setting grid-column-start and grid-row-start back to 'auto' thro ugh JS");
110 element.style.gridColumnStart = "18"; 124 element.style.gridColumnStart = "18";
111 element.style.gridRowStart = "66"; 125 element.style.gridRowStart = "66";
112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'"); 126 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'");
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / auto'"); 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / auto'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'"); 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'"); 129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'");
116 element.style.gridColumnStart = "auto"; 130 element.style.gridColumnStart = "auto";
117 element.style.gridRowStart = "auto"; 131 element.style.gridRowStart = "auto";
118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'"); 132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
119 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'"); 134 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
122 </script> 136 </script>
123 <script src="../js/resources/js-test-post.js"></script> 137 <script src="../js/resources/js-test-post.js"></script>
124 </body> 138 </body>
125 </html> 139 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698