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

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 17601010: [CSS Grid Layout] Rename grid placement properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 7 years, 6 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-end-after-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-start-before-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-start: 10; 10 grid-column-start: 10;
11 grid-before: 15; 11 grid-row-start: 15;
12 } 12 }
13 .gridItemWithNegativeInteger { 13 .gridItemWithNegativeInteger {
14 grid-start: -10; 14 grid-column-start: -10;
15 grid-before: -15; 15 grid-row-start: -15;
16 } 16 }
17 .gridItemWithBeforeSpan { 17 .gridItemWithBeforeSpan {
18 grid-start: span 2; 18 grid-column-start: span 2;
19 grid-before: span 8; 19 grid-row-start: span 8;
20 } 20 }
21 .gridItemWithAfterSpan { 21 .gridItemWithAfterSpan {
22 grid-start: 2 span; 22 grid-column-start: 2 span;
23 grid-before: 8 span; 23 grid-row-start: 8 span;
24 } 24 }
25 .gridItemWithOnlySpan { 25 .gridItemWithOnlySpan {
26 grid-start: span; 26 grid-column-start: span;
27 grid-before: span; 27 grid-row-start: span;
28 } 28 }
29 .gridItemWithAuto { 29 .gridItemWithAuto {
30 grid-start: auto; 30 grid-column-start: auto;
31 grid-before: auto; 31 grid-row-start: auto;
32 } 32 }
33 .gridItemWithString { 33 .gridItemWithString {
34 grid-start: "first"; 34 grid-column-start: "first";
35 grid-before: "last"; 35 grid-row-start: "last";
36 } 36 }
37 .gridItemWithSpanString { 37 .gridItemWithSpanString {
38 grid-start: "first" span; 38 grid-column-start: "first" span;
39 grid-before: span "last"; 39 grid-row-start: span "last";
40 } 40 }
41 .gridItemWithSpanNumberString { 41 .gridItemWithSpanNumberString {
42 grid-start: 2 "first" span; 42 grid-column-start: 2 "first" span;
43 grid-before: "last" 3 span; 43 grid-row-start: "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-start and grid-before works as expected'); 62 description('Test that setting and getting grid-column-start and grid-row-st art works as expected');
63 63
64 debug("Test getting grid-start and grid-before set through CSS"); 64 debug("Test getting grid-column-start and grid-row-start set through CSS");
65 var gridElement = document.getElementById("gridElement"); 65 var gridElement = document.getElementById("gridElement");
66 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-start')", "'auto'"); 66 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-st art')", "'auto'");
67 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')" , "'auto / auto'"); 67 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')" , "'auto / auto'");
68 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-before')" , "'auto'"); 68 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start ')", "'auto'");
69 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", " 'auto / auto'"); 69 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", " 'auto / auto'");
70 70
71 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to"); 71 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to");
72 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto"); 72 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
73 testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto"); 73 testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto");
74 testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto"); 74 testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto");
75 testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / a uto"); 75 testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / a uto");
76 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 76 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
77 testColumnRowCSSParsing("gridItemWithStringElement", "1 first / auto", "1 la st / auto"); 77 testColumnRowCSSParsing("gridItemWithStringElement", "1 first / auto", "1 la st / auto");
78 testColumnRowCSSParsing("gridItemWithSpanStringElement", "span 1 first / aut o", "span 1 last / auto"); 78 testColumnRowCSSParsing("gridItemWithSpanStringElement", "span 1 first / aut o", "span 1 last / auto");
79 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "span 2 first / auto", "span 3 last / auto"); 79 testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "span 2 first / auto", "span 3 last / auto");
80 80
81 debug(""); 81 debug("");
82 debug("Test the initial value"); 82 debug("Test the initial value");
83 var element = document.createElement("div"); 83 var element = document.createElement("div");
84 document.body.appendChild(element); 84 document.body.appendChild(element);
85 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a uto'"); 85 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' auto'"); 87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
88 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 88 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
89 89
90 debug(""); 90 debug("");
91 debug("Test getting and setting grid-start and grid-before through JS"); 91 debug("Test getting and setting grid-column-start and grid-row-start through JS");
92 testStartBeforeJSParsing("18", "66"); 92 testStartBeforeJSParsing("18", "66");
93 testStartBeforeJSParsing("-55", "-40"); 93 testStartBeforeJSParsing("-55", "-40");
94 testStartBeforeJSParsing("'nav'", "'last'", "1 nav", "1 last"); 94 testStartBeforeJSParsing("'nav'", "'last'", "1 nav", "1 last");
95 testStartBeforeJSParsing("span 3", "span 20"); 95 testStartBeforeJSParsing("span 3", "span 20");
96 testStartBeforeJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last"); 96 testStartBeforeJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last");
97 testStartBeforeJSParsing("auto", "auto"); 97 testStartBeforeJSParsing("auto", "auto");
98 98
99 debug(""); 99 debug("");
100 debug("Test setting grid-start and grid-before to 'inherit' through JS"); 100 debug("Test setting grid-column-start and grid-row-start to 'inherit' throug h JS");
101 testStartBeforeInheritJSParsing("inherit", "18"); 101 testStartBeforeInheritJSParsing("inherit", "18");
102 testStartBeforeInheritJSParsing("2", "inherit"); 102 testStartBeforeInheritJSParsing("2", "inherit");
103 testStartBeforeInheritJSParsing("inherit", "inherit"); 103 testStartBeforeInheritJSParsing("inherit", "inherit");
104 104
105 debug(""); 105 debug("");
106 debug("Test setting grid-start and grid-before to 'initial' through JS"); 106 debug("Test setting grid-column-start and grid-row-start to 'initial' throug h JS");
107 testStartBeforeInitialJSParsing(); 107 testStartBeforeInitialJSParsing();
108 108
109 debug(""); 109 debug("");
110 debug("Test setting grid-start and grid-before back to 'auto' through JS"); 110 debug("Test setting grid-column-start and grid-row-start back to 'auto' thro ugh JS");
111 element.style.gridStart = "18"; 111 element.style.gridColumnStart = "18";
112 element.style.gridBefore = "66"; 112 element.style.gridRowStart = "66";
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'1 8'"); 113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / auto'"); 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / auto'");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' 66'"); 115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'"); 116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'");
117 element.style.gridStart = "auto"; 117 element.style.gridColumnStart = "auto";
118 element.style.gridBefore = "auto"; 118 element.style.gridRowStart = "auto";
119 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a uto'"); 119 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' auto'"); 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
122 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 122 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
123 </script> 123 </script>
124 <script src="../js/resources/js-test-post.js"></script> 124 <script src="../js/resources/js-test-post.js"></script>
125 </body> 125 </body>
126 </html> 126 </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') | LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698