mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-25 00:50:22 +00:00
LibWeb: Improve grid-template-area parsing and serialization
This commit is contained in:
Gingeh
parent
66ea341a61
commit
7fe49734d7
12 changed files with 270 additions and 59 deletions
|
|
@ -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(' '));
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 < 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());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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$";
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 ..."'
|
||||
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 ..."'
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in a new issue