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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html

Issue 333563003: [CSS Grid Layout] Update grid-auto-flow to the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Small fix in add/removeChild to avoid dirtying the grid in stack Created 6 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
« LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html ('k') | LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 #gridWithNone { 6 #gridWithNone {
7 grid: none; 7 grid: none;
8 } 8 }
9 #gridWithTemplate { 9 #gridWithTemplate {
10 grid: 15px / 10px; 10 grid: 15px / 10px;
11 } 11 }
12 #gridWithAutoFlowAndColumns { 12 #gridWithAutoFlowAndColumns {
13 grid: row 10px; 13 grid: column 10px;
14 } 14 }
15 #gridWithAutoFlowNone { 15 #gridWithAutoFlowNone {
16 grid: none 10px; 16 grid: none 10px;
17 } 17 }
18 #gridWithAutoFlowColumnDense {
19 grid: column dense 10px;
20 }
21 #gridWithAutoFlowDenseRow {
22 grid: dense row 10px;
23 }
24 #gridWithAutoFlowStackColumn {
25 grid: stack column 10px;
26 }
27 #gridWithAutoFlowRowStack {
28 grid: row stack 10px;
29 }
18 #gridWithAutoFlowAndColumnsAndRows { 30 #gridWithAutoFlowAndColumnsAndRows {
19 grid: column 10px / 20px; 31 grid: column 10px / 20px;
20 } 32 }
21 33
22 /* Bad values. */ 34 /* Bad values. */
23 35
24 #gridWithExplicitAndImplicit { 36 #gridWithExplicitAndImplicit {
25 grid: 10px / 20px column; 37 grid: 10px / 20px column;
26 } 38 }
27 #gridWithMisplacedNone1 { 39 #gridWithMisplacedNone1 {
28 grid: column 10px / none 20px; 40 grid: column 10px / none 20px;
29 } 41 }
30 #gridWithMisplacedNone2 { 42 #gridWithMisplacedNone2 {
31 grid: 10px / 20px none; 43 grid: 10px / 20px none;
32 } 44 }
45 #gridWithMisplacedDense {
46 grid: dense column dense;
47 }
48 #gridWithMisplacedStack {
49 grid: stack row stack;
50 }
33 </style> 51 </style>
34 <script src="../../resources/js-test.js"></script> 52 <script src="../../resources/js-test.js"></script>
35 </head> 53 </head>
36 <body> 54 <body>
37 <div class="grid" id="gridWithNone"></div> 55 <div class="grid" id="gridWithNone"></div>
38 <div class="grid" id="gridWithTemplate"></div> 56 <div class="grid" id="gridWithTemplate"></div>
39 <div class="grid" id="gridWithAutoFlowAndColumns"></div> 57 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
40 <div class="grid" id="gridWithAutoFlowNone"></div> 58 <div class="grid" id="gridWithAutoFlowNone"></div>
59 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
60 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
61 <div class="grid" id="gridWithAutoFlowStackColumn"></div>
62 <div class="grid" id="gridWithAutoFlowRowStack"></div>
41 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div> 63 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
42 <div class="grid" id="gridWithExplicitAndImplicit"></div> 64 <div class="grid" id="gridWithExplicitAndImplicit"></div>
43 <div class="grid" id="gridWithMisplacedNone1"></div> 65 <div class="grid" id="gridWithMisplacedNone1"></div>
44 <div class="grid" id="gridWithMisplacedNone2"></div> 66 <div class="grid" id="gridWithMisplacedNone2"></div>
67 <div class="grid" id="gridWithMisplacedDense"></div>
68 <div class="grid" id="gridWithMisplacedStack"></div>
45 <script src="resources/grid-shorthand-parsing-utils.js"></script> 69 <script src="resources/grid-shorthand-parsing-utils.js"></script>
46 <script> 70 <script>
47 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned."); 71 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned.");
48 72
49 debug("Test getting the longhand values when shorthand is set through CSS.") ; 73 debug("Test getting the longhand values when shorthand is set through CSS.") ;
50 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "none", "auto", "auto"); 74 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto");
51 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "none", "auto", "auto"); 75 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto");
52 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn s"), "none", "none", "none", "row", "10px", "10px"); 76 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn s"), "none", "none", "none", "column", "10px", "10px");
53 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "none", "10px", "10px"); 77 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto");
78 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px");
79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px");
80 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStackColu mn"), "none", "none", "none", "stack column", "10px", "10px");
81 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowStack" ), "none", "none", "none", "stack row", "10px", "10px");
54 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn sAndRows"), "none", "none", "none", "column", "10px", "20px"); 82 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn sAndRows"), "none", "none", "none", "column", "10px", "20px");
55 83
56 debug(""); 84 debug("");
57 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')"); 85 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')");
58 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "none", "auto", "auto"); 86 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto");
59 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "none", "auto", "auto"); 87 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
60 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "none", "auto", "auto"); 88 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
89 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
90 testGridDefinitionsValues(document.getElementById("gridWithMisplacedStack"), "none", "none", "none", "row", "auto", "auto");
61 91
62 debug(""); 92 debug("");
63 debug("Test getting and setting 'grid' shorthand through JS"); 93 debug("Test getting and setting 'grid' shorthand through JS");
64 testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "none" , "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial"); 94 testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
65 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\"", "none", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", "initial", "initial"); 95 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\"", "row", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", " initial", "initial");
66 testGridDefinitionsSetJSValues("row 20px", "none", "none", "none", "row", "2 0px", "20px", "initial", "initial", "initial", "row", "20px", "20px"); 96 testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "ro w dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
67 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px"); 97 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px");
68 98
69 debug(""); 99 debug("");
70 debug("Test the initial value"); 100 debug("Test the initial value");
71 var element = document.createElement("div"); 101 var element = document.createElement("div");
72 document.body.appendChild(element); 102 document.body.appendChild(element);
73 testGridDefinitionsValues(element, "none", "none", "none", "none", "auto", " auto"); 103 testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "a uto");
74 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); 104 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
75 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); 105 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
76 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'"); 106 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
77 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'"); 107 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
78 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'"); 108 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'");
79 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
80 110
81 debug(""); 111 debug("");
82 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS"); 112 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");
83 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px"); 113 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px");
84 testGridDefinitionsSetJSValues("none", "none", "none", "none", "none", "auto ", "auto", "none", "none", "none", "initial", "initial", "initial"); 114 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial");
85 115
86 </script> 116 </script>
87 </body> 117 </body>
88 </html> 118 </html>
OLDNEW
« LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html ('K') | « LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html ('k') | LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698