Index: third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html |
diff --git a/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html b/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..93ee9c66f68b209fb227c7fffba7d3866bd8e293 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html |
@@ -0,0 +1,105 @@ |
+<!DOCTYPE html> |
+<style> |
+.flex-container { |
+ background: #333; |
+ border: 0px; |
+ display: flex; |
+ margin: 0px; |
+ padding: 0px; |
+} |
+ |
+.flex-container.flex-direction-row { |
+ flex-direction : row; |
+} |
+ |
+.flex-container.flex-direction-row-reverse { |
+ flex-direction : row-reverse; |
+} |
+ |
+.flex-container.flex-direction-column { |
+ flex-direction : column; |
+} |
+ |
+.flex-container.flex-direction-column-reverse { |
+ flex-direction : column-reverse; |
+} |
+ |
+.flex-container.flex-direction-column-reverse { |
+ flex-direction : column-reverse; |
+} |
+ |
+.flex-container.justify-content-center { |
+ justify-content: center; |
+} |
+ |
+.flex-container.justify-content-space-around { |
+ justify-content: space-around; |
+} |
+ |
+.flex-container.justify-content-space-between { |
+ justify-content: space-between; |
+} |
+ |
+.flex-item { |
+ width:50px; |
+ height:50px; |
+ margin:20px; |
+ background: #eee; |
+ line-height: 50px; |
+ text-align: center; |
+} |
+</style> |
+ |
+<fieldset> |
+ <legend>Fieldset with display: flex</legend> |
+ <div>these fieldsshouldn't bestacked vertically</div> |
+</fieldset> |
+ |
+<h1>flex-direction: row</h1> |
+<div class="flex-container flex-direction-row"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>flex-direction: row-reverse</h1> |
+<div class="flex-container flex-direction-row-reverse"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>flex-direction: column</h1> |
+<div class="flex-container flex-direction-column"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>flex-direction: column-reverse</h1> |
+<div class="flex-container flex-direction-column-reverse"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>justify-content: center</h1> |
+<div class="flex-container justify-content-center"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>justify-content: space-around</h1> |
+<div class="flex-container justify-content-space-around"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |
+ |
+<h1>justify-content: space-between</h1> |
+<div class="flex-container justify-content-space-between"> |
+ <div class="flex-item">1</div> |
+ <div class="flex-item">2</div> |
+ <div class="flex-item">3</div> |
+</div> |