Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Implement `gap` property for flexbox (#621)

Add visual tests for flexbox gap.

Co-authored-by: Michael Ragazzon <[email protected]>
ChrisFloofyKitsune 1 year ago
parent
8b18a7c516
commit
b5bf23ddde
19 changed files with 740 additions and 0 deletions
Split View Show Diff Stats
  1. 33 0
      Source/Core/Layout/FlexFormattingContext.cpp
  2. 35 0
      Tests/Data/VisualTests/gap-001.rml
  3. 35 0
      Tests/Data/VisualTests/gap-002.rml
  4. 37 0
      Tests/Data/VisualTests/gap-003.rml
  5. 35 0
      Tests/Data/VisualTests/gap-004.rml
  6. 35 0
      Tests/Data/VisualTests/gap-005.rml
  7. 50 0
      Tests/Data/VisualTests/gap-006.rml
  8. 38 0
      Tests/Data/VisualTests/gap-007.rml
  9. 40 0
      Tests/Data/VisualTests/gap-008.rml
  10. 39 0
      Tests/Data/VisualTests/gap-009.rml
  11. 34 0
      Tests/Data/VisualTests/reference/gap-001-ref.rml
  12. 36 0
      Tests/Data/VisualTests/reference/gap-002-ref.rml
  13. 42 0
      Tests/Data/VisualTests/reference/gap-003-ref.rml
  14. 34 0
      Tests/Data/VisualTests/reference/gap-004-ref.rml
  15. 34 0
      Tests/Data/VisualTests/reference/gap-005-ref.rml
  16. 50 0
      Tests/Data/VisualTests/reference/gap-006-ref.rml
  17. 42 0
      Tests/Data/VisualTests/reference/gap-007-ref.rml
  18. 44 0
      Tests/Data/VisualTests/reference/gap-008-ref.rml
  19. 47 0
      Tests/Data/VisualTests/reference/gap-009-ref.rml

+ 33 - 0
Source/Core/Layout/FlexFormattingContext.cpp
View File 

@@ -236,6 +236,8 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector
 
 
 	const ComputedValues& computed_flex = element_flex->GetComputedValues();
 
 	const Style::FlexDirection direction = computed_flex.flex_direction();
 
+	const Style::LengthPercentage row_gap = computed_flex.row_gap();
 
+	const Style::LengthPercentage column_gap = computed_flex.column_gap();
 
 
 	const bool main_axis_horizontal = (direction == Style::FlexDirection::Row || direction == Style::FlexDirection::RowReverse);
 
 	const bool direction_reverse = (direction == Style::FlexDirection::RowReverse || direction == Style::FlexDirection::ColumnReverse);
 
@@ -257,6 +259,9 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector
 
 	const float main_size_base_value = (main_available_size < 0.0f ? 0.0f : main_available_size);
 
 	const float cross_size_base_value = (cross_available_size < 0.0f ? 0.0f : cross_available_size);
 
 
+	const float main_gap_size = ResolveValue(main_axis_horizontal ? column_gap : row_gap, main_size_base_value);
 
+	const float cross_gap_size = ResolveValue(main_axis_horizontal ? row_gap : column_gap, cross_size_base_value);
 
+
 
 	// -- Build a list of all flex items with base size information --
 
 	const int num_flex_children = element_flex->GetNumChildren();
 
 	Vector<FlexItem> items;
 
@@ -386,6 +391,8 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector
 
 				// Add item to current line.
 
 				line_items.push_back(std::move(item));
 
 			}
 
+
 
+			cursor += main_gap_size;
 
 		}
 
 
 		if (!line_items.empty())
 
@@ -397,6 +404,18 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector
 
 
 	for (FlexLine& line : container.lines)
 
 	{
 
+		// now that items are in lines, we can add the main gap size to all but the last item
 
+		if (main_gap_size > 0.f)
 
+		{
 
+			for (size_t i = 0; i < line.items.size() - 1; i++)
 
+			{
 
+				line.items[i].hypothetical_main_size += main_gap_size;
 
+				line.items[i].flex_base_size += main_gap_size;
 
+				line.items[i].main.margin_b += main_gap_size;
 
+				line.items[i].main.sum_edges += main_gap_size;
 
+			}
 
+		}
 
+
 
 		line.accumulated_hypothetical_main_size = std::accumulate(line.items.begin(), line.items.end(), 0.0f,
 
 			[](float value, const FlexItem& item) { return value + item.hypothetical_main_size; });
 
 	}
 
@@ -624,6 +643,20 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector
 
 		}
 
 	}
 
 
+	// Apply cross axis gaps to every item in every line except the last line.
 
+	if (cross_gap_size > 0.f)
 
+	{
 
+		for (size_t i = 0; i < container.lines.size() - 1; i++)
 
+		{
 
+			FlexLine& line = container.lines[i];
 
+			for (FlexItem& item : line.items)
 
+			{
 
+				item.cross.margin_b += cross_gap_size;
 
+				item.cross.sum_edges += cross_gap_size;
 
+			}
 
+		}
 
+	}
 
+
 
 	// -- Determine cross size (§9.4) --
 
 	// First, determine the cross size of each item, format it if necessary.
 
 	for (FlexLine& line : container.lines)

+ 35 - 0
Tests/Data/VisualTests/gap-001.rml
View File 

@@ -0,0 +1,35 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-001-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-001-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			display: flex;
 
+			flex-direction: row;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			flex: 1 1 auto;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 35 - 0
Tests/Data/VisualTests/gap-002.rml
View File 

@@ -0,0 +1,35 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-002-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gaps" rel="help" title="The 'gap' property"/>
 
+	<link href="reference/gap-002-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			width: 200px;
 
+			height: 400px;
 
+			display: flex;
 
+			flex-direction: column;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			flex: 1 1 auto;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+<hr/>
 
+</body>
 
+</rml>

+ 37 - 0
Tests/Data/VisualTests/gap-003.rml
View File 

@@ -0,0 +1,37 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - rows and columns</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-003-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-003-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 200px;
 
+			width: 400px;
 
+			display: flex;
 
+			gap: 20px;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			width: 190px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 35 - 0
Tests/Data/VisualTests/gap-004.rml
View File 

@@ -0,0 +1,35 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - intrinsic horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-004-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-004-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			display: inline-flex;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 35 - 0
Tests/Data/VisualTests/gap-005.rml
View File 

@@ -0,0 +1,35 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - intrinsic vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-005-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-005-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			display: inline-flex;
 
+			flex-direction: column;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 50 - 0
Tests/Data/VisualTests/gap-006.rml
View File 

@@ -0,0 +1,50 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - wrap horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-006-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-006-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 200px;
 
+			display: inline-flex;
 
+			flex-wrap: wrap;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+			height: 20px;
 
+		}
 
+
 
+		#bp {
 
+			width: 120px;
 
+		}
 
+
 
+		#ww {
 
+			width: 130px;
 
+		}
 
+
 
+		#s, #f {
 
+			width: 40px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div id="bp">Black Panther</div>
 
+	<div id="ww">Wonder Woman</div>
 
+	<div id="s">Storm</div>
 
+	<div id="f">Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 38 - 0
Tests/Data/VisualTests/gap-007.rml
View File 

@@ -0,0 +1,38 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - wrap vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-007-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-007-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 200px;
 
+			display: inline-flex;
 
+			flex-direction: column;
 
+			flex-wrap: wrap;
 
+			gap: 20px;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 40 - 0
Tests/Data/VisualTests/gap-008.rml
View File 

@@ -0,0 +1,40 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - row and column gap</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-008-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-008-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 400px;
 
+			display: flex;
 
+			gap: 40px 20px;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			width: 190px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>
 
+	Test passes if there are <strong> 40px horizontal green lines and 20px vertical green lines between
 
+	boxes</strong>.
 
+</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 39 - 0
Tests/Data/VisualTests/gap-009.rml
View File 

@@ -0,0 +1,39 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - mixed units</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/gap-009-ltr.xht" rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<link href="https://www.w3.org/TR/css-grid-1/#gutters" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#column-row-gap" rel="help"/>
 
+	<link href="https://www.w3.org/TR/css-align-3/#gap-legacy" rel="help"/>
 
+	<link href="reference/gap-009-ref.rml" rel="match"/>
 
+	<meta content="The 'gap' property enables putting space exclusively between items" name="assert"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 30rem;
 
+			display: flex;
 
+			gap: 50% 1rem;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			width: 14.5rem;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>
 
+	Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.
 
+</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 34 - 0
Tests/Data/VisualTests/reference/gap-001-ref.rml
View File 

@@ -0,0 +1,34 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-001-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			display: flex;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			flex: 1 1 auto;
 
+			flex-direction: row;
 
+		}
 
+
 
+		section > div:not(:first-child) {
 
+			margin-left: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 36 - 0
Tests/Data/VisualTests/reference/gap-002-ref.rml
View File 

@@ -0,0 +1,36 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-002-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			width: 200px;
 
+			height: 400px;
 
+			display: flex;
 
+			flex-direction: column;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			flex: 1 1 auto;
 
+		}
 
+
 
+		section > div:not(:first-child) {
 
+			margin-top: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+<hr/>
 
+</body>
 
+</rml>

+ 42 - 0
Tests/Data/VisualTests/reference/gap-003-ref.rml
View File 

@@ -0,0 +1,42 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - rows and columns</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-003-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 200px;
 
+			width: 400px;
 
+			display: flex;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			width: 190px;
 
+		}
 
+
 
+		section > div:nth-child(1),
 
+		section > div:nth-child(3) {
 
+			margin-right: 20px;
 
+		}
 
+
 
+		section > div:nth-child(3),
 
+		section > div:nth-child(4) {
 
+			margin-top: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 34 - 0
Tests/Data/VisualTests/reference/gap-004-ref.rml
View File 

@@ -0,0 +1,34 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - intrinsic horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-004-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			display: inline-flex;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+
 
+		section > div:not(:last-of-type) {
 
+			margin-right: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 34 - 0
Tests/Data/VisualTests/reference/gap-005-ref.rml
View File 

@@ -0,0 +1,34 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - intrinsic vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-005-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			display: inline-flex;
 
+			flex-direction: column;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+
 
+		section > div:not(:last-of-type) {
 
+			margin-bottom: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 50 - 0
Tests/Data/VisualTests/reference/gap-006-ref.rml
View File 

@@ -0,0 +1,50 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - wrap horizontal</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-006-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 200px;
 
+			display: inline-flex;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+			height: 20px;
 
+		}
 
+
 
+		#bp {
 
+			width: 120px;
 
+		}
 
+
 
+		#ww {
 
+			width: 130px;
 
+		}
 
+
 
+		#s, #f {
 
+			width: 40px;
 
+		}
 
+
 
+		#bp, #ww {
 
+			margin-bottom: 20px;
 
+			margin-right: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div id="bp">Black Panther</div>
 
+	<div id="ww">Wonder Woman</div>
 
+	<div id="s">Storm</div>
 
+	<div id="f">Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 42 - 0
Tests/Data/VisualTests/reference/gap-007-ref.rml
View File 

@@ -0,0 +1,42 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - wrap vertical</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-007-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 200px;
 
+			display: inline-flex;
 
+			flex-direction: column;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			color: white;
 
+		}
 
+
 
+		section > div:nth-child(2) {
 
+			margin-top: 20px;
 
+			margin-bottom: 20px;
 
+		}
 
+
 
+		section > div:not(:last-of-type) {
 
+			margin-right: 20px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
 
+<section>
 
+	<div>Black Panther</div>
 
+	<div>Wonder Woman</div>
 
+	<div>Storm</div>
 
+	<div>Flash</div>
 
+</section>
 
+</body>
 
+</rml>

+ 44 - 0
Tests/Data/VisualTests/reference/gap-008-ref.rml
View File 

@@ -0,0 +1,44 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - row and column gap</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-008-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 400px;
 
+			display: flex;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+			width: 190px;
 
+		}
 
+
 
+		section > div:nth-child(1),
 
+		section > div:nth-child(3) {
 
+			margin-right: 20px;
 
+		}
 
+
 
+		section > div:nth-child(3),
 
+		section > div:nth-child(4) {
 
+			margin-top: 40px;
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>
 
+	Test passes if there are <strong>40px horizontal green lines and 20px vertical green lines between boxes</strong>.
 
+</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>

+ 47 - 0
Tests/Data/VisualTests/reference/gap-009-ref.rml
View File 

@@ -0,0 +1,47 @@
 
+<rml>
 
+<head>
 
+	<link type="text/rcss" href="/../Tests/Data/style.rcss"/>
 
+	<title>CSS Flexbox Test: gap - mixed units</title>
 
+	<link href="https://test.csswg.org/suites/css-align-3_dev/nightly-unstable/xhtml1/reference/gap-009-ltr-ref.xht"
 
+		  rel="source"/>
 
+	<link href="mailto:[email protected]" rel="author" title="Adam Argyle"/>
 
+	<style>
 
+		section {
 
+			background-color: green;
 
+			height: 100px;
 
+			width: 30rem;
 
+			display: flex;
 
+			flex-wrap: wrap;
 
+		}
 
+
 
+		section > div {
 
+			background-color: grey;
 
+		}
 
+
 
+		section > div {
 
+			width: 14.5rem;
 
+		}
 
+
 
+		section > div:nth-child(1),
 
+		section > div:nth-child(3) {
 
+			margin-right: 1rem;
 
+		}
 
+
 
+		section > div:nth-child(3),
 
+		section > div:nth-child(4) {
 
+			margin-top: 50px; /* half block size */
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+<p>
 
+	Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.
 
+</p>
 
+<section>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+	<div></div>
 
+</section>
 
+</body>
 
+</rml>