diff --git a/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Libraries/LibWeb/CSS/Parser/Parser.cpp index 5d8ff1db63e..77f3975998c 100644 --- a/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -22,6 +22,7 @@ #include #include #include +#include #include #include #include @@ -7585,20 +7586,60 @@ RefPtr Parser::parse_grid_shorthand_value(TokenStream Parser::parse_grid_template_areas_value(TokenStream& tokens) { // none | + - Vector> 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 predicate) { + StringBuilder builder; + while (!code_points.done() && predicate(*code_points)) { + builder.append_code_point(*code_points); + ++code_points; + } + return MUST(builder.to_string()); + }; + + Vector> grid_area_rows; + Optional column_count; auto transaction = tokens.begin_transaction(); while (tokens.has_next_token() && tokens.next_token().is(Token::Type::String)) { Vector grid_area_columns; - auto const parts = MUST(tokens.consume_a_token().token().string().to_string().split(' ')); - for (auto& part : parts) { - grid_area_columns.append(part); + auto string = tokens.consume_a_token().token().string().code_points(); + auto code_points = string.begin(); + + 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); } diff --git a/Libraries/LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.cpp index 45c3d93acbc..b03d906fb16 100644 --- a/Libraries/LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.cpp @@ -8,6 +8,7 @@ */ #include "GridTemplateAreaStyleValue.h" +#include 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 < m_grid_template_area[y].size() - 1) - builder.append(" "sv); + if (x != 0) + row_builder.append(' '); + row_builder.appendff("{}", m_grid_template_area[y][x]); } - if (y < m_grid_template_area.size() - 1) - builder.append(", "sv); + serialize_a_string(builder, row_builder.string_view()); } return MUST(builder.to_string()); } diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.txt new file mode 100644 index 00000000000..033e914fb4d --- /dev/null +++ b/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$"; \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt index 539aff1f5d8..6cce9dd8d70 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt @@ -6,15 +6,15 @@ Rerun Found 121 tests -26 Pass -95 Fail +31 Pass +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 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt index 244054a5e56..9e837dc030a 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt @@ -6,8 +6,8 @@ Rerun Found 63 tests -18 Pass -45 Fail +21 Pass +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 diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-computed.txt index bc33dae34ee..da06f7e9487 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-computed.txt +++ b/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 -8 Fail +9 Pass Details Result Test Name MessagePass Property grid-template-areas value 'none' -Fail Property grid-template-areas value '"first"' -Fail Property grid-template-areas value '"first second"' -Fail Property grid-template-areas value '"1st 2nd 3rd"' -Fail Property grid-template-areas value '"first second" "third fourth"' -Fail Property grid-template-areas value '"first second" "third ." "1st 2nd" "3rd 4th"' -Fail Property grid-template-areas value '" a b "' -Fail Property grid-template-areas value '"c d"' -Fail Property grid-template-areas value '"first ..."' \ No newline at end of file +Pass Property grid-template-areas value '"first"' +Pass Property grid-template-areas value '"first second"' +Pass Property grid-template-areas value '"1st 2nd 3rd"' +Pass Property grid-template-areas value '"first second" "third fourth"' +Pass Property grid-template-areas value '"first second" "third ." "1st 2nd" "3rd 4th"' +Pass Property grid-template-areas value '" a b "' +Pass Property grid-template-areas value '"c d"' +Pass Property grid-template-areas value '"first ..."' \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.txt index 712731830d8..c8c2ff0766a 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.txt +++ b/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 -5 Fail +11 Pass 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 -Fail e.style['grid-template-areas'] = "\".\" \" \"" should not set the property value -Fail 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 -Fail e.style['grid-template-areas'] = "\"first\" \" \"" 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 +Pass e.style['grid-template-areas'] = "\"first\" \"\"" should not set the property value +Pass e.style['grid-template-areas'] = "\"first\" \"\" \"second\"" 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 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.txt index 1b94117a6e2..171f45f77f1 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.txt +++ b/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 -2 Fail +6 Pass 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. -Fail "grid-template-areas: '$';" should be invalid. +Pass "grid-template-areas: '' '';" should be invalid. +Pass "grid-template-areas: '$';" should be invalid. Pass "grid-template-areas: ' ';" should be invalid. \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-valid.txt index 64240754036..121a67811b3 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-valid.txt +++ b/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 -8 Fail +9 Pass 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 -Fail 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 -Fail 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 -Fail 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 -Fail e.style['grid-template-areas'] = "\"first ...\"" should set the property value \ No newline at end of file +Pass e.style['grid-template-areas'] = "\"first\"" should set the property value +Pass e.style['grid-template-areas'] = "\"first second\"" should set the property value +Pass e.style['grid-template-areas'] = "\"1st 2nd 3rd\"" should set the property value +Pass e.style['grid-template-areas'] = "\"first second\" \"third fourth\"" should set the property value +Pass e.style['grid-template-areas'] = "\"first second\" \"third .\" \"1st 2nd\" \"3rd 4th\"" should set the property value +Pass e.style['grid-template-areas'] = "\" a \t b \"" should set the property value +Pass e.style['grid-template-areas'] = "\"c\td\"" should set the property value +Pass e.style['grid-template-areas'] = "\"first ...\"" should set the property value \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt index 96f5e9283bc..0ae2c86917b 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt @@ -6,8 +6,8 @@ Rerun Found 24 tests -15 Pass -9 Fail +18 Pass +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 \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html new file mode 100644 index 00000000000..82ecaf89ad1 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html @@ -0,0 +1,72 @@ + + +CSS Grid Layout Test: Support for 'grid-template-ares' property + + + + + + + + +
+ +
+ + diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/support/testing-utils.js b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/grid-definition/support/testing-utils.js new file mode 100644 index 00000000000..30b944265b4 --- /dev/null +++ b/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 + } +})();