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

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 17601010: [CSS Grid Layout] Rename grid placement properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 7 years, 5 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/grid-item-column-row-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js » ('J')
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 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <style> 8 <style>
9 .gridItemWithPositiveInteger { 9 .gridItemWithPositiveInteger {
10 grid-end: 10; 10 grid-column-end: 10;
11 grid-after: 15; 11 grid-row-end: 15;
12 } 12 }
13 .gridItemWithNegativeInteger { 13 .gridItemWithNegativeInteger {
14 grid-end: -10; 14 grid-column-end: -10;
15 grid-after: -15; 15 grid-row-end: -15;
16 } 16 }
17 .gridItemWithBeforeSpan { 17 .gridItemWithBeforeSpan {
18 grid-end: span 2; 18 grid-column-end: span 2;
19 grid-after: span 9; 19 grid-row-end: span 9;
20 } 20 }
21 .gridItemWithAfterSpan { 21 .gridItemWithAfterSpan {
22 grid-end: 2 span; 22 grid-column-end: 2 span;
23 grid-after: 9 span; 23 grid-row-end: 9 span;
24 } 24 }
25 .gridItemWithOnlySpan { 25 .gridItemWithOnlySpan {
26 grid-end: span; 26 grid-column-end: span;
27 grid-after: span; 27 grid-row-end: span;
28 } 28 }
29 .gridItemWithAuto { 29 .gridItemWithAuto {
30 grid-end: auto; 30 grid-column-end: auto;
31 grid-after: auto; 31 grid-row-end: auto;
32 } 32 }
33 .gridItemWithString { 33 .gridItemWithString {
34 grid-end: "first"; 34 grid-column-end: "first";
35 grid-after: "last"; 35 grid-row-end: "last";
36 } 36 }
37 .gridItemWithSpanString { 37 .gridItemWithSpanString {
38 grid-end: "first" span; 38 grid-column-end: "first" span;
39 grid-after: span "last"; 39 grid-row-end: span "last";
40 } 40 }
41 .gridItemWithSpanNumberString { 41 .gridItemWithSpanNumberString {
42 grid-end: 2 "first" span; 42 grid-column-end: 2 "first" span;
43 grid-after: "last" 3 span; 43 grid-row-end: "last" 3 span;
44 } 44 }
45 </style> 45 </style>
46 <script src="resources/grid-item-column-row-parsing-utils.js"></script> 46 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
47 <script src="../js/resources/js-test-pre.js"></script> 47 <script src="../js/resources/js-test-pre.js"></script>
48 </head> 48 </head>
49 <body> 49 <body>
50 <!-- The first has no properties set on it. --> 50 <!-- The first has no properties set on it. -->
51 <div id="gridElement"></div> 51 <div id="gridElement"></div>
52 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> 52 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
53 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> 53 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
54 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div> 54 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
55 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div> 55 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
56 <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div> 56 <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
57 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> 57 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
58 <div class="gridItemWithString" id="gridItemWithStringElement"></div> 58 <div class="gridItemWithString" id="gridItemWithStringElement"></div>
59 <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div> 59 <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div>
60 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringElemen t"></div> 60 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringElemen t"></div>
61 <script> 61 <script>
62 description('Test that setting and getting grid-end and grid-after works as expected'); 62 description('Test that setting and getting grid-column-end and grid-row-end works as expected');
63 63
64 debug("Test getting grid-end and grid-after set through CSS"); 64 debug("Test getting grid-column-end and grid-row-end set through CSS");
65 testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto"); 65 testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
66 testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15"); 66 testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
67 testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15"); 67 testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
68 testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / s pan 9"); 68 testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / s pan 9");
69 testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / sp an 9"); 69 testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / sp an 9");
70 testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / spa n 1"); 70 testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / spa n 1");
71 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 71 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
72 testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last"); 72 testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last");
73 testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 firs t", "auto / span 1 last"); 73 testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 firs t", "auto / span 1 last");
74 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last"); 74 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last");
75 75
76 debug(""); 76 debug("");
77 debug("Test the initial value"); 77 debug("Test the initial value");
78 var element = document.createElement("div"); 78 var element = document.createElement("div");
79 document.body.appendChild(element); 79 document.body.appendChild(element);
80 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut o'"); 80 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
81 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 81 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
82 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a uto'"); 82 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
83 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 83 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
84 84
85 debug(""); 85 debug("");
86 debug("Test getting and setting grid-end and grid-after through JS"); 86 debug("Test getting and setting grid-column-end and grid-row-end through JS" );
87 testEndAfterJSParsing("18", "66"); 87 testEndAfterJSParsing("18", "66");
88 testEndAfterJSParsing("-55", "-40"); 88 testEndAfterJSParsing("-55", "-40");
89 testEndAfterJSParsing("'first'", "'last'", "1 first", "1 last"); 89 testEndAfterJSParsing("'first'", "'last'", "1 first", "1 last");
90 testEndAfterJSParsing("span 7", "span 2"); 90 testEndAfterJSParsing("span 7", "span 2");
91 testEndAfterJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last"); 91 testEndAfterJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last");
92 testEndAfterJSParsing("auto", "auto"); 92 testEndAfterJSParsing("auto", "auto");
93 93
94 debug(""); 94 debug("");
95 debug("Test setting grid-start and grid-before to 'inherit' through JS"); 95 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS");
96 testEndAfterInheritJSParsing("inherit", "18"); 96 testEndAfterInheritJSParsing("inherit", "18");
97 testEndAfterInheritJSParsing("2", "inherit"); 97 testEndAfterInheritJSParsing("2", "inherit");
98 testEndAfterInheritJSParsing("inherit", "inherit"); 98 testEndAfterInheritJSParsing("inherit", "inherit");
99 99
100 debug(""); 100 debug("");
101 debug("Test setting grid-start and grid-before to 'initial' through JS"); 101 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS");
102 testEndAfterInitialJSParsing(); 102 testEndAfterInitialJSParsing();
103 103
104 debug(""); 104 debug("");
105 debug("Test setting grid-end and grid-after back to 'auto' through JS"); 105 debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
106 element.style.gridEnd = "18"; 106 element.style.gridColumnEnd = "18";
107 element.style.gridAfter = "66"; 107 element.style.gridRowEnd = "66";
108 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'18' "); 108 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'18'");
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / 18'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / 18'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'6 6'"); 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " '66'");
111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / 66'"); 111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / 66'");
112 element.style.gridEnd = "auto"; 112 element.style.gridColumnEnd = "auto";
113 element.style.gridAfter = "auto"; 113 element.style.gridRowEnd = "auto";
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut o'"); 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a uto'"); 116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
118 </script> 118 </script>
119 <script src="../js/resources/js-test-post.js"></script> 119 <script src="../js/resources/js-test-post.js"></script>
120 </body> 120 </body>
121 </html> 121 </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') | LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698