| Index: third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html b/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..280ac8379fb8f4619002bfb1d00729fb8e8d9554
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html
|
| @@ -0,0 +1,107 @@
|
| +<!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 style="display: flex;">
|
| + <legend>Fieldset with display: flex</legend>
|
| + <div>these fields</div>
|
| + <div>shouldn't be</div>
|
| + <div>stacked vertically</div>
|
| +</fieldset>
|
| +
|
| +<h1>flex-direction: row</h1>
|
| +<fieldset class="flex-container flex-direction-row">
|
| + <div class="flex-item">1</div>
|
| + <div class="flex-item">2</div>
|
| + <div class="flex-item">3</div>
|
| +</fieldset>
|
| +
|
| +<h1>flex-direction: row-reverse</h1>
|
| +<fieldset 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>
|
| +</fieldset>
|
| +
|
| +<h1>flex-direction: column</h1>
|
| +<fieldset class="flex-container flex-direction-column">
|
| + <div class="flex-item">1</div>
|
| + <div class="flex-item">2</div>
|
| + <div class="flex-item">3</div>
|
| +</fieldset>
|
| +
|
| +<h1>flex-direction: column-reverse</h1>
|
| +<fieldset 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>
|
| +</fieldset>
|
| +
|
| +<h1>justify-content: center</h1>
|
| +<fieldset class="flex-container justify-content-center">
|
| + <div class="flex-item">1</div>
|
| + <div class="flex-item">2</div>
|
| + <div class="flex-item">3</div>
|
| +</fieldset>
|
| +
|
| +<h1>justify-content: space-around</h1>
|
| +<fieldset 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>
|
| +</fieldset>
|
| +
|
| +<h1>justify-content: space-between</h1>
|
| +<fieldset 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>
|
| +</fieldset>
|
|
|
Chromium Code Reviews
Issue 2215133005:
Add grid/flex layout support for <fieldset> (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master