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

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 13992003: Add support for parsing <grid-line> that includes a 'span' (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixed the change to match the specification Created 7 years, 8 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 <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 -webkit-grid-end: 10; 10 -webkit-grid-end: 10;
11 -webkit-grid-after: 15; 11 -webkit-grid-after: 15;
12 } 12 }
13 .gridItemWithNegativeInteger { 13 .gridItemWithNegativeInteger {
14 -webkit-grid-end: -10; 14 -webkit-grid-end: -10;
15 -webkit-grid-after: -15; 15 -webkit-grid-after: -15;
16 } 16 }
17 .gridItemWithBeforeSpan {
18 -webkit-grid-end: span 2;
19 -webkit-grid-after: span 9;
20 }
21 .gridItemWithAfterSpan {
22 -webkit-grid-end: 2 span;
23 -webkit-grid-after: 9 span;
24 }
25 .gridItemWithOnlySpan {
26 -webkit-grid-end: span;
27 -webkit-grid-after: span;
28 }
17 .gridItemWithAuto { 29 .gridItemWithAuto {
18 -webkit-grid-end: auto; 30 -webkit-grid-end: auto;
19 -webkit-grid-after: auto; 31 -webkit-grid-after: auto;
20 } 32 }
21 </style> 33 </style>
22 <script src="../js/resources/js-test-pre.js"></script> 34 <script src="../js/resources/js-test-pre.js"></script>
23 </head> 35 </head>
24 <body> 36 <body>
25 <!-- The first has no properties set on it. --> 37 <!-- The first has no properties set on it. -->
26 <div id="gridElement"></div> 38 <div id="gridElement"></div>
27 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> 39 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
28 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> 40 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
41 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
42 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
43 <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
29 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> 44 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
30 <script> 45 <script>
31 description('Test that setting and getting grid-end and grid-after works as expected'); 46 description('Test that setting and getting grid-end and grid-after works as expected');
32 47
33 debug("Test getting -webkit-grid-end and -webkit-grid-after set through CSS" ); 48 debug("Test getting -webkit-grid-end and -webkit-grid-after set through CSS" );
34 var gridElement = document.getElementById("gridElement"); 49 var gridElement = document.getElementById("gridElement");
35 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-e nd')", "'auto'"); 50 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-e nd')", "'auto'");
36 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-c olumn')", "'auto / auto'"); 51 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-c olumn')", "'auto / auto'");
37 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-a fter')", "'auto'"); 52 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-a fter')", "'auto'");
38 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-r ow')", "'auto / auto'"); 53 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-r ow')", "'auto / auto'");
39 54
40 var gridItemWithPositiveInteger = document.getElementById("gridItemWithPosit iveInteger"); 55 var gridItemWithPositiveInteger = document.getElementById("gridItemWithPosit iveInteger");
41 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-end')", "'10'"); 56 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-end')", "'10'");
42 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-column')", "'auto / 10'"); 57 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-column')", "'auto / 10'");
43 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-after')", "'15'"); 58 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-after')", "'15'");
44 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-row')", "'auto / 15'"); 59 shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue ('-webkit-grid-row')", "'auto / 15'");
45 60
46 var gridItemWithNegativeInteger = document.getElementById("gridItemWithNegat iveInteger"); 61 var gridItemWithNegativeInteger = document.getElementById("gridItemWithNegat iveInteger");
47 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-end')", "'-10'"); 62 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-end')", "'-10'");
48 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-column')", "'auto / -10'"); 63 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-column')", "'auto / -10'");
49 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-after')", "'-15'"); 64 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-after')", "'-15'");
50 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-row')", "'auto / -15'"); 65 shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue ('-webkit-grid-row')", "'auto / -15'");
51 66
67 var gridItemWithBeforeSpan = document.getElementById("gridItemWithBeforeSpan ");
68 shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-we bkit-grid-end')", "'span 2'");
69 shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-we bkit-grid-column')", "'auto / span 2'");
70 shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-we bkit-grid-after')", "'span 9'");
71 shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-we bkit-grid-row')", "'auto / span 9'");
72
73 var gridItemWithAfterSpan = document.getElementById("gridItemWithAfterSpan") ;
74 shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-web kit-grid-end')", "'span 2'");
75 shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-web kit-grid-column')", "'auto / span 2'");
76 shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-web kit-grid-after')", "'span 9'");
77 shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-web kit-grid-row')", "'auto / span 9'");
78
79 var gridItemWithOnlySpan = document.getElementById("gridItemWithOnlySpan");
80 shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webk it-grid-end')", "'span 1'");
81 shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webk it-grid-column')", "'auto / span 1'");
82 shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webk it-grid-after')", "'span 1'");
83 shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webk it-grid-row')", "'auto / span 1'");
84
52 var gridItemWithAutoElement = document.getElementById("gridItemWithAutoEleme nt"); 85 var gridItemWithAutoElement = document.getElementById("gridItemWithAutoEleme nt");
53 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-end')", "'auto'"); 86 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-end')", "'auto'");
54 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-column')", "'auto / auto'"); 87 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-column')", "'auto / auto'");
55 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-after')", "'auto'"); 88 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-after')", "'auto'");
56 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-row')", "'auto / auto'"); 89 shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-w ebkit-grid-row')", "'auto / auto'");
57 90
58 debug(""); 91 debug("");
59 debug("Test the initial value"); 92 debug("Test the initial value");
60 var element = document.createElement("div"); 93 var element = document.createElement("div");
61 document.body.appendChild(element); 94 document.body.appendChild(element);
(...skipping 15 matching lines...) Expand all
77 document.body.appendChild(element); 110 document.body.appendChild(element);
78 element.style.webkitGridEnd = "-55"; 111 element.style.webkitGridEnd = "-55";
79 element.style.webkitGridAfter = "-40"; 112 element.style.webkitGridAfter = "-40";
80 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'-55'"); 113 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'-55'");
81 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / -55'"); 114 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / -55'");
82 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'-40'"); 115 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'-40'");
83 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / -40'"); 116 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / -40'");
84 117
85 element = document.createElement("div"); 118 element = document.createElement("div");
86 document.body.appendChild(element); 119 document.body.appendChild(element);
120 element.style.webkitGridEnd = "span 7";
121 element.style.webkitGridAfter = "span 2";
122 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'span 7'");
123 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / span 7'");
124 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'span 2'");
125 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / span 2'");
126
127 element = document.createElement("div");
128 document.body.appendChild(element);
87 element.style.webkitGridEnd = "auto"; 129 element.style.webkitGridEnd = "auto";
88 element.style.webkitGridAfter = "auto"; 130 element.style.webkitGridAfter = "auto";
89 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'"); 131 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'");
90 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'"); 132 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'");
91 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'"); 133 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'");
92 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'"); 134 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'");
93 135
94 debug(""); 136 debug("");
95 debug("Test setting grid-end and grid-after back to 'auto' through JS"); 137 debug("Test setting grid-end and grid-after back to 'auto' through JS");
96 element.style.webkitGridEnd = "18"; 138 element.style.webkitGridEnd = "18";
97 element.style.webkitGridAfter = "66"; 139 element.style.webkitGridAfter = "66";
98 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'18'"); 140 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'18'");
99 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / 18'"); 141 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / 18'");
100 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'66'"); 142 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'66'");
101 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / 66'"); 143 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / 66'");
102 element.style.webkitGridEnd = "auto"; 144 element.style.webkitGridEnd = "auto";
103 element.style.webkitGridAfter = "auto"; 145 element.style.webkitGridAfter = "auto";
104 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'"); 146 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'");
105 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'"); 147 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'");
106 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'"); 148 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'");
107 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'"); 149 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'");
108 </script> 150 </script>
109 <script src="../js/resources/js-test-post.js"></script> 151 <script src="../js/resources/js-test-post.js"></script>
110 </body> 152 </body>
111 </html> 153 </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