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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 203963008: [CSS Grid Layout] Vertical rectangles not recognized as valid grid areas (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 9 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 | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-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 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 #gridWithSingleStringTemplate { 6 #gridWithSingleStringTemplate {
7 grid-template-areas: "area"; 7 grid-template-areas: "area";
8 } 8 }
9 9
10 #gridWithTwoColumnsTemplate { 10 #gridWithTwoColumnsTemplate {
(...skipping 11 matching lines...) Expand all
22 22
23 #gridWithSpanningRowsDotTemplate { 23 #gridWithSpanningRowsDotTemplate {
24 grid-template-areas: "span" 24 grid-template-areas: "span"
25 "."; 25 ".";
26 } 26 }
27 27
28 #gridWithDotColumn { 28 #gridWithDotColumn {
29 grid-template-areas: "header ." 29 grid-template-areas: "header ."
30 "footer ."; 30 "footer .";
31 } 31 }
32
33 #gridWithHorizontalRectangle {
34 grid-template-areas: "a a a"
35 "a a a";
36 }
37
38 #gridWithVerticalRectangle {
39 grid-template-areas: "a a"
40 "a a"
41 "a a";
42 }
43
32 </style> 44 </style>
33 <script src="../../resources/js-test.js"></script> 45 <script src="../../resources/js-test.js"></script>
34 </head> 46 </head>
35 <body> 47 <body>
36 <div class="grid" id="gridWithDefaultTemplate"></div> 48 <div class="grid" id="gridWithDefaultTemplate"></div>
37 <div class="grid" id="gridWithSingleStringTemplate"></div> 49 <div class="grid" id="gridWithSingleStringTemplate"></div>
38 <div class="grid" id="gridWithTwoColumnsTemplate"></div> 50 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
39 <div class="grid" id="gridWithTwoRowsTemplate"></div> 51 <div class="grid" id="gridWithTwoRowsTemplate"></div>
40 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> 52 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
41 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> 53 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
42 <div class="grid" id="gridWithDotColumn"></div> 54 <div class="grid" id="gridWithDotColumn"></div>
55 <div class="grid" id="gridWithHorizontalRectangle"></div>
56 <div class="grid" id="gridWithVerticalRectangle"></div>
43 <script> 57 <script>
44 description("This test checks that grid-template-areas is properly parsed.") ; 58 description("This test checks that grid-template-areas is properly parsed.") ;
45 59
46 debug("Test getting grid-template-areas set through CSS."); 60 debug("Test getting grid-template-areas set through CSS.");
47 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 61 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te");
48 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 62 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none")
49 63
50 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 64 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate");
51 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"') 65 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"')
52 66
53 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template"); 67 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template");
54 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"') 68 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"')
55 69
56 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te"); 70 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te");
57 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"') 71 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"')
58 72
59 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate"); 73 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate");
60 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"') 74 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"')
61 75
62 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate"); 76 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate");
63 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."') 77 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."')
64 78
65 var gridWithDotColumn = document.getElementById("gridWithDotColumn"); 79 var gridWithDotColumn = document.getElementById("gridWithDotColumn");
66 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."') 80 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."')
67 81
82 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle");
83 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
84
85 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle");
86 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
87
68 debug("Test grid-template-areas: initial"); 88 debug("Test grid-template-areas: initial");
69 var element = document.createElement("div"); 89 var element = document.createElement("div");
70 document.body.appendChild(element); 90 document.body.appendChild(element);
71 element.style.gridTemplateAreas = "'foobar'"; 91 element.style.gridTemplateAreas = "'foobar'";
72 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 92 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"')
73 element.style.gridTemplateAreas = "initial"; 93 element.style.gridTemplateAreas = "initial";
74 document.body.removeChild(element); 94 document.body.removeChild(element);
75 95
76 debug("Test grid-template-areas: inherit"); 96 debug("Test grid-template-areas: inherit");
77 var parentElement = document.createElement("div"); 97 var parentElement = document.createElement("div");
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
110 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 130 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
111 131
112 debug(""); 132 debug("");
113 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 133 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
114 // <ident> only allows a leading '-'. 134 // <ident> only allows a leading '-'.
115 element.style.gridTemplateAreas = '"nav-up"'; 135 element.style.gridTemplateAreas = '"nav-up"';
116 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 136 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
117 </script> 137 </script>
118 </body> 138 </body>
119 </html> 139 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698