Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html

Issue 2215133005: Add grid/flex layout support for <fieldset> (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fixed more ClusterFuzz tests Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <style>
3 .flex-container {
4 background: #333;
5 border: 0px;
6 display: flex;
7 margin: 0px;
8 padding: 0px;
9 }
10
11 .flex-container.flex-direction-row {
12 flex-direction : row;
13 }
14
15 .flex-container.flex-direction-row-reverse {
16 flex-direction : row-reverse;
17 }
18
19 .flex-container.flex-direction-column {
20 flex-direction : column;
21 }
22
23 .flex-container.flex-direction-column-reverse {
24 flex-direction : column-reverse;
25 }
26
27 .flex-container.flex-direction-column-reverse {
28 flex-direction : column-reverse;
29 }
30
31 .flex-container.justify-content-center {
32 justify-content: center;
33 }
34
35 .flex-container.justify-content-space-around {
36 justify-content: space-around;
37 }
38
39 .flex-container.justify-content-space-between {
40 justify-content: space-between;
41 }
42
43 .flex-item {
44 width:50px;
45 height:50px;
46 margin:20px;
47 background: #eee;
48 line-height: 50px;
49 text-align: center;
50 }
51 </style>
52
53 <fieldset style="display: flex;">
54 <legend>Fieldset with display: flex</legend>
55 <div>these fields</div>
56 <div>shouldn't be</div>
57 <div>stacked vertically</div>
58 </fieldset>
59
60 <h1>flex-direction: row</h1>
61 <fieldset class="flex-container flex-direction-row">
62 <div class="flex-item">1</div>
63 <div class="flex-item">2</div>
64 <div class="flex-item">3</div>
65 </fieldset>
66
67 <h1>flex-direction: row-reverse</h1>
68 <fieldset class="flex-container flex-direction-row-reverse">
69 <div class="flex-item">1</div>
70 <div class="flex-item">2</div>
71 <div class="flex-item">3</div>
72 </fieldset>
73
74 <h1>flex-direction: column</h1>
75 <fieldset class="flex-container flex-direction-column">
76 <div class="flex-item">1</div>
77 <div class="flex-item">2</div>
78 <div class="flex-item">3</div>
79 </fieldset>
80
81 <h1>flex-direction: column-reverse</h1>
82 <fieldset class="flex-container flex-direction-column-reverse">
83 <div class="flex-item">1</div>
84 <div class="flex-item">2</div>
85 <div class="flex-item">3</div>
86 </fieldset>
87
88 <h1>justify-content: center</h1>
89 <fieldset class="flex-container justify-content-center">
90 <div class="flex-item">1</div>
91 <div class="flex-item">2</div>
92 <div class="flex-item">3</div>
93 </fieldset>
94
95 <h1>justify-content: space-around</h1>
96 <fieldset class="flex-container justify-content-space-around">
97 <div class="flex-item">1</div>
98 <div class="flex-item">2</div>
99 <div class="flex-item">3</div>
100 </fieldset>
101
102 <h1>justify-content: space-between</h1>
103 <fieldset class="flex-container justify-content-space-between">
104 <div class="flex-item">1</div>
105 <div class="flex-item">2</div>
106 <div class="flex-item">3</div>
107 </fieldset>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698