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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2150003005: Add grid/flex layout support for <fieldset> (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add grid/flex layout support for <fieldset> Created 4 years, 4 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/fast/forms/fieldset/fieldset-display-flex.html ('k') | third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-grid.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>
54 <legend>Fieldset with display: flex</legend>
55 <div>these fieldsshouldn't bestacked vertically</div>
56 </fieldset>
57
58 <h1>flex-direction: row</h1>
59 <div class="flex-container flex-direction-row">
60 <div class="flex-item">1</div>
61 <div class="flex-item">2</div>
62 <div class="flex-item">3</div>
63 </div>
64
65 <h1>flex-direction: row-reverse</h1>
66 <div class="flex-container flex-direction-row-reverse">
67 <div class="flex-item">1</div>
68 <div class="flex-item">2</div>
69 <div class="flex-item">3</div>
70 </div>
71
72 <h1>flex-direction: column</h1>
73 <div class="flex-container flex-direction-column">
74 <div class="flex-item">1</div>
75 <div class="flex-item">2</div>
76 <div class="flex-item">3</div>
77 </div>
78
79 <h1>flex-direction: column-reverse</h1>
80 <div class="flex-container flex-direction-column-reverse">
81 <div class="flex-item">1</div>
82 <div class="flex-item">2</div>
83 <div class="flex-item">3</div>
84 </div>
85
86 <h1>justify-content: center</h1>
87 <div class="flex-container justify-content-center">
88 <div class="flex-item">1</div>
89 <div class="flex-item">2</div>
90 <div class="flex-item">3</div>
91 </div>
92
93 <h1>justify-content: space-around</h1>
94 <div class="flex-container justify-content-space-around">
95 <div class="flex-item">1</div>
96 <div class="flex-item">2</div>
97 <div class="flex-item">3</div>
98 </div>
99
100 <h1>justify-content: space-between</h1>
101 <div class="flex-container justify-content-space-between">
102 <div class="flex-item">1</div>
103 <div class="flex-item">2</div>
104 <div class="flex-item">3</div>
105 </div>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-flex.html ('k') | third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-display-grid.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698