LibWeb: Improve grid-template-area parsing and serialization

Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -22,6 +22,7 @@
 #include <LibWeb/CSS/CSSStyleSheet.h>
 #include <LibWeb/CSS/CSSStyleValue.h>
 #include <LibWeb/CSS/CalculatedOr.h>
+#include <LibWeb/CSS/CharacterTypes.h>
 #include <LibWeb/CSS/EdgeRect.h>
 #include <LibWeb/CSS/MediaList.h>
 #include <LibWeb/CSS/Parser/Parser.h>
@@ -7585,20 +7586,60 @@ RefPtr<CSSStyleValue> Parser::parse_grid_shorthand_value(TokenStream<ComponentVa
 RefPtr<CSSStyleValue> Parser::parse_grid_template_areas_value(TokenStream<ComponentValue>& tokens)
 {
     // none | <string>+
-    Vector<Vector<String>> grid_area_rows;
-
     if (auto none = parse_all_as_single_keyword_value(tokens, Keyword::None))
-        return GridTemplateAreaStyleValue::create(move(grid_area_rows));
+        return GridTemplateAreaStyleValue::create({});
+
+    auto is_full_stop = [](u32 code_point) {
+        return code_point == '.';
+    };
+
+    auto consume_while = [](Utf8CodePointIterator& code_points, AK::Function<bool(u32)> predicate) {
+        StringBuilder builder;
+        while (!code_points.done() && predicate(*code_points)) {
+            builder.append_code_point(*code_points);
+            ++code_points;
+        }
+        return MUST(builder.to_string());
+    };
+
+    Vector<Vector<String>> grid_area_rows;
+    Optional<size_t> column_count;
 
     auto transaction = tokens.begin_transaction();
     while (tokens.has_next_token() && tokens.next_token().is(Token::Type::String)) {
         Vector<String> grid_area_columns;
-        auto const parts = MUST(tokens.consume_a_token().token().string().to_string().split(' '));
+        auto string = tokens.consume_a_token().token().string().code_points();
-        for (auto& part : parts) {
+        auto code_points = string.begin();
-            grid_area_columns.append(part);
+
+        while (!code_points.done()) {
+            if (is_whitespace(*code_points)) {
+                consume_while(code_points, is_whitespace);
+            } else if (is_full_stop(*code_points)) {
+                consume_while(code_points, *is_full_stop);
+                grid_area_columns.append("."_string);
+            } else if (is_ident_code_point(*code_points)) {
+                auto token = consume_while(code_points, is_ident_code_point);
+                grid_area_columns.append(move(token));
+            } else {
+                return nullptr;
             }
+        }
+
+        if (grid_area_columns.is_empty())
+            return nullptr;
+
+        if (column_count.has_value()) {
+            if (grid_area_columns.size() != column_count)
+                return nullptr;
+        } else {
+            column_count = grid_area_columns.size();
+        }
+
         grid_area_rows.append(move(grid_area_columns));
     }
+
+    // FIXME: If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
+
     transaction.commit();
     return GridTemplateAreaStyleValue::create(grid_area_rows);
 }

Libraries/LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.cpp

@@ -8,6 +8,7 @@
  */
 
 #include "GridTemplateAreaStyleValue.h"
+#include <LibWeb/CSS/Serialize.h>
 
 namespace Web::CSS {
 
@@ -23,13 +24,15 @@ String GridTemplateAreaStyleValue::to_string() const
 
     StringBuilder builder;
     for (size_t y = 0; y < m_grid_template_area.size(); ++y) {
+        if (y != 0)
+            builder.append(' ');
+        StringBuilder row_builder;
         for (size_t x = 0; x < m_grid_template_area[y].size(); ++x) {
-            builder.appendff("{}", m_grid_template_area[y][x]);
+            if (x != 0)
-            if (x < m_grid_template_area[y].size() - 1)
+                row_builder.append(' ');
-                builder.append(" "sv);
+            row_builder.appendff("{}", m_grid_template_area[y][x]);
         }
-        if (y < m_grid_template_area.size() - 1)
+        serialize_a_string(builder, row_builder.string_view());
-            builder.append(", "sv);
     }
     return MUST(builder.to_string());
 }

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.txt

@@ -0,0 +1,56 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 45 tests
+
+36 Pass
+9 Fail
+Details
+Result	Test Name	MessagePass	'grid' with: grid-template-areas: none;	
+Pass	'grid' with: grid-template-areas: "a";	
+Pass	'grid' with: grid-template-areas: ".";	
+Pass	'grid' with: grid-template-areas: "lower UPPER 10 -minus _low 1-st ©copy_right line¶";	
+Pass	'grid' with: grid-template-areas: "a b";	
+Pass	'grid' with: grid-template-areas: "a b" "c d";	
+Pass	'grid' with: grid-template-areas: "a b" "c d";	
+Pass	'grid' with: grid-template-areas: "a b""c d";	
+Pass	'grid' with: grid-template-areas: "a b" "c d";	
+Pass	'grid' with: grid-template-areas: "a b" "c d";	
+Pass	'grid' with: grid-template-areas: "a b" "a b";	
+Pass	'grid' with: grid-template-areas: "a a" "b b";	
+Pass	'grid' with: grid-template-areas: ". a ." "b a c";	
+Pass	'grid' with: grid-template-areas: ".. a ..." "b a c";	
+Pass	'grid' with: grid-template-areas: ".a..." "b a c";	
+Pass	'grid' with: grid-template-areas: "head head" "nav main" "foot .";	
+Pass	'grid' with: grid-template-areas: "head head" "nav main" "foot ....";	
+Pass	'grid' with: grid-template-areas: "head head" "nav main" "foot.";	
+Pass	'grid' with: grid-template-areas: ". header header ." "nav main main main" "nav footer footer .";	
+Pass	'grid' with: grid-template-areas: "... header header ...." "nav main main main" "nav footer footer ....";	
+Pass	'grid' with: grid-template-areas: "...header header...." "nav main main main" "nav footer footer....";	
+Pass	'grid' with: grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls";	
+Pass	'grid' with: grid-template-areas: "title board" "stats board" "score ctrls";	
+Pass	'grid' with: grid-template-areas: ". a" "b a" ". a";	
+Pass	'grid' with: grid-template-areas: ".. a" "b a" "... a";	
+Pass	'grid' with: grid-template-areas: "..a" "b a" ".a";	
+Pass	'grid' with: grid-template-areas: "a a a" "b b b";	
+Pass	'grid' with: grid-template-areas: ". ." "a a";	
+Pass	'grid' with: grid-template-areas: "... ...." "a a";	
+Pass	'grid' with: grid-template-areas: a;	
+Pass	'grid' with: grid-template-areas: "a" "b c";	
+Pass	'grid' with: grid-template-areas: "a b" "c" "d e";	
+Pass	'grid' with: grid-template-areas: "a b c" "d e";	
+Pass	'grid' with: grid-template-areas: "a b"-"c d";	
+Pass	'grid' with: grid-template-areas: "a b" - "c d";	
+Pass	'grid' with: grid-template-areas: "a b" . "c d";	
+Fail	'grid' with: grid-template-areas: "a b a";	
+Fail	'grid' with: grid-template-areas: "a" "b" "a";	
+Fail	'grid' with: grid-template-areas: "a b" "b b";	
+Fail	'grid' with: grid-template-areas: "b a" "b b";	
+Fail	'grid' with: grid-template-areas: "a b" "b a";	
+Fail	'grid' with: grid-template-areas: "a ." ". a";	
+Fail	'grid' with: grid-template-areas: ",";	
+Fail	'grid' with: grid-template-areas: "10%";	
+Fail	'grid' with: grid-template-areas: "USD$";	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt

@@ -6,15 +6,15 @@ Rerun
 
 Found 121 tests
 
-26 Pass
+31 Pass
-95 Fail
+90 Fail
 Details
 Result	Test Name	MessageFail	e.style.cssText = grid: auto-flow auto / 100px 100px should set grid	
 Fail	e.style.cssText = grid: auto-flow auto / 100px 100px should set grid-template-areas	
 Pass	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid	
 Fail	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-auto-flow	
 Fail	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-auto-rows	
-Fail	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-template-areas	
+Pass	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-template-areas	
 Fail	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid	
 Pass	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-auto-flow	
 Fail	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-template	
@@ -115,18 +115,18 @@ Fail	e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(au
 Fail	e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-template-columns	
 Fail	e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-template-rows	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid	
-Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
+Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid	
-Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-areas	
+Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-areas	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-columns	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-rows	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid	
-Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
+Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid	
-Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
+Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas	
 Fail	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns	
 Pass	e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt

@@ -6,8 +6,8 @@ Rerun
 
 Found 63 tests
 
-18 Pass
+21 Pass
-45 Fail
+42 Fail
 Details
 Result	Test Name	MessageFail	e.style['grid'] = "none" should set grid-auto-columns	
 Fail	e.style['grid'] = "none" should set grid-auto-flow	
@@ -40,21 +40,21 @@ Pass	e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5e
 Fail	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-columns	
 Fail	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-flow	
 Fail	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-rows	
-Fail	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas	
+Pass	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas	
 Pass	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns	
 Fail	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows	
 Pass	e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands	
 Fail	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-columns	
 Fail	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-flow	
 Fail	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-rows	
-Fail	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas	
+Pass	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas	
 Pass	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns	
 Fail	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows	
 Pass	e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands	
 Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-columns	
 Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-flow	
 Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-rows	
-Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas	
+Pass	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas	
 Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns	
 Fail	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows	
 Pass	e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should not set unrelated longhands	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-computed.txt

@@ -6,15 +6,14 @@ Rerun
 
 Found 9 tests
 
-1 Pass
+9 Pass
-8 Fail
 Details
 Result	Test Name	MessagePass	Property grid-template-areas value 'none'	
-Fail	Property grid-template-areas value '"first"'	
+Pass	Property grid-template-areas value '"first"'	
-Fail	Property grid-template-areas value '"first second"'	
+Pass	Property grid-template-areas value '"first second"'	
-Fail	Property grid-template-areas value '"1st 2nd 3rd"'	
+Pass	Property grid-template-areas value '"1st 2nd 3rd"'	
-Fail	Property grid-template-areas value '"first second" "third fourth"'	
+Pass	Property grid-template-areas value '"first second" "third fourth"'	
-Fail	Property grid-template-areas value '"first second" "third ." "1st 2nd" "3rd 4th"'	
+Pass	Property grid-template-areas value '"first second" "third ." "1st 2nd" "3rd 4th"'	
-Fail	Property grid-template-areas value '" a b "'	
+Pass	Property grid-template-areas value '" a b "'	
-Fail	Property grid-template-areas value '"c d"'	
+Pass	Property grid-template-areas value '"c d"'	
-Fail	Property grid-template-areas value '"first ..."'	
+Pass	Property grid-template-areas value '"first ..."'	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.txt

@@ -6,17 +6,16 @@ Rerun
 
 Found 11 tests
 
-6 Pass
+11 Pass
-5 Fail
 Details
 Result	Test Name	MessagePass	e.style['grid-template-areas'] = "auto" should not set the property value	
 Pass	e.style['grid-template-areas'] = "none \"first\"" should not set the property value	
 Pass	e.style['grid-template-areas'] = "\"first\" none" should not set the property value	
 Pass	e.style['grid-template-areas'] = "\"\"" should not set the property value	
 Pass	e.style['grid-template-areas'] = "\" \"" should not set the property value	
-Fail	e.style['grid-template-areas'] = "\".\" \"\"" should not set the property value	
+Pass	e.style['grid-template-areas'] = "\".\" \"\"" should not set the property value	
-Fail	e.style['grid-template-areas'] = "\".\" \" \"" should not set the property value	
+Pass	e.style['grid-template-areas'] = "\".\" \" \"" should not set the property value	
-Fail	e.style['grid-template-areas'] = "\"first\" \"\"" should not set the property value	
+Pass	e.style['grid-template-areas'] = "\"first\" \"\"" should not set the property value	
-Fail	e.style['grid-template-areas'] = "\"first\" \"\" \"second\"" should not set the property value	
+Pass	e.style['grid-template-areas'] = "\"first\" \"\" \"second\"" should not set the property value	
-Fail	e.style['grid-template-areas'] = "\"first\" \" \"" should not set the property value	
+Pass	e.style['grid-template-areas'] = "\"first\" \" \"" should not set the property value	
 Pass	e.style['grid-template-areas'] = "\"\" none" should not set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.txt

@@ -6,12 +6,11 @@ Rerun
 
 Found 6 tests
 
-4 Pass
+6 Pass
-2 Fail
 Details
 Result	Test Name	MessagePass	"grid-template-areas: 'a';" should be valid.	
 Pass	"grid-template-areas: '.';" should be valid.	
 Pass	"grid-template-areas: '';" should be invalid.	
-Fail	"grid-template-areas: '' '';" should be invalid.	
+Pass	"grid-template-areas: '' '';" should be invalid.	
-Fail	"grid-template-areas: '$';" should be invalid.	
+Pass	"grid-template-areas: '$';" should be invalid.	
 Pass	"grid-template-areas: ' ';" should be invalid.	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-valid.txt

@@ -6,15 +6,14 @@ Rerun
 
 Found 9 tests
 
-1 Pass
+9 Pass
-8 Fail
 Details
 Result	Test Name	MessagePass	e.style['grid-template-areas'] = "none" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"first\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"first\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"first second\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"first second\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"1st 2nd 3rd\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"1st 2nd 3rd\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"first second\" \"third fourth\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"first second\" \"third fourth\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"first second\" \"third .\" \"1st 2nd\" \"3rd 4th\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"first second\" \"third .\" \"1st 2nd\" \"3rd 4th\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\" a \t b \"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\" a \t b \"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"c\td\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"c\td\"" should set the property value	
-Fail	e.style['grid-template-areas'] = "\"first ...\"" should set the property value	
+Pass	e.style['grid-template-areas'] = "\"first ...\"" should set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt

@@ -6,8 +6,8 @@ Rerun
 
 Found 24 tests
 
-15 Pass
+18 Pass
-9 Fail
+6 Fail
 Details
 Result	Test Name	MessagePass	e.style['grid-template'] = "none" should set grid-template-areas	
 Fail	e.style['grid-template'] = "none" should set grid-template-columns	
@@ -21,15 +21,15 @@ Pass	e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(
 Pass	e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-columns	
 Pass	e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-rows	
 Pass	e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should not set unrelated longhands	
-Fail	e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas	
+Pass	e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas	
 Pass	e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns	
 Fail	e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows	
 Pass	e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands	
-Fail	e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas	
+Pass	e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas	
 Pass	e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns	
 Fail	e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows	
 Pass	e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands	
-Fail	e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas	
+Pass	e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas	
 Fail	e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns	
 Fail	e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows	
 Pass	e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should not set unrelated longhands	

Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<style>
+  #grid {
+    display: grid;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid"></div>
+
+<script>
+  // Single values.
+  TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
+  TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
+  TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a   b"   "c   d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
+  TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
+  TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+  TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+  TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
+  TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
+  TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"');
+
+  // Reset values.
+  document.getElementById('grid').style.gridTemplateAreas = '';
+
+  // Wrong values.
+  TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '","', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
+</script>

Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/support/testing-utils.js

@@ -0,0 +1,43 @@
+var TestingUtils = (function() {
+
+    function checkGridTemplateColumns(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
+    }
+
+    function checkGridTemplateRows(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
+    }
+
+    function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, label) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateColumns = columnsStyle;
+            grid.style.gridTemplateRows = rowsStyle;
+            checkGridTemplateColumns(grid, columnsComputedValue);
+            checkGridTemplateRows(grid, rowsComputedValue);
+        }, (label ? label + " " : "") + "'" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+    }
+
+    function checkGridTemplateAreas(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas");
+    }
+
+    function testGridTemplateAreas(gridId, style, value) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateAreas = style;
+            checkGridTemplateAreas(grid, value);
+        }, "'" + gridId + "' with: grid-template-areas: " + style + ";");
+    }
+
+    return {
+        testGridTemplateColumnsRows: testGridTemplateColumnsRows,
+        testGridTemplateAreas: testGridTemplateAreas
+    }
+})();