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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex.html

Issue 2373963002: Support display:flex for 'summary' (Closed)
Patch Set: Support display flex/inline-flex/grid/inline-grid for summary Created 4 years, 2 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/html/summary-display-grid-expected.html ('k') | third_party/WebKit/LayoutTests/fast/html/summary-display-inline-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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <style> 2 <style>
3 .flex-container { 3 .flex-container {
4 background: #333; 4 background: #333;
5 border: 0px; 5 border: 0px;
6 display: flex; 6 display: inline-flex;
7 margin: 0px; 7 margin: 0px;
8 padding: 0px; 8 padding: 0px;
9 } 9 }
10 10
11 .flex-container.flex-direction-row { 11 .flex-container.flex-direction-row {
12 flex-direction : row; 12 flex-direction : row;
13 } 13 }
14 14
15 .flex-container.flex-direction-row-reverse { 15 .flex-container.flex-direction-row-reverse {
16 flex-direction : row-reverse; 16 flex-direction : row-reverse;
(...skipping 26 matching lines...) Expand all
43 .flex-item { 43 .flex-item {
44 width:50px; 44 width:50px;
45 height:50px; 45 height:50px;
46 margin:20px; 46 margin:20px;
47 background: #eee; 47 background: #eee;
48 line-height: 50px; 48 line-height: 50px;
49 text-align: center; 49 text-align: center;
50 } 50 }
51 </style> 51 </style>
52 52
53 <fieldset style="display: flex;"> 53 <summary style="display: inline-flex;">
54 <legend>Fieldset with display: flex</legend>
55 <div>these fields</div> 54 <div>these fields</div>
56 <div>shouldn't be</div> 55 <div>shouldn't be</div>
57 <div>stacked vertically</div> 56 <div>stacked vertically</div>
58 </fieldset> 57 </summary>
59 58
60 <h1>flex-direction: row</h1> 59 <h1>flex-direction: row</h1>
61 <fieldset class="flex-container flex-direction-row"> 60 <summary class="flex-container flex-direction-row">
62 <div class="flex-item">1</div> 61 <div class="flex-item">1</div>
63 <div class="flex-item">2</div> 62 <div class="flex-item">2</div>
64 <div class="flex-item">3</div> 63 <div class="flex-item">3</div>
65 </fieldset> 64 </summary>
66 65
67 <h1>flex-direction: row-reverse</h1> 66 <h1>flex-direction: row-reverse</h1>
68 <fieldset class="flex-container flex-direction-row-reverse"> 67 <summary class="flex-container flex-direction-row-reverse">
69 <div class="flex-item">1</div> 68 <div class="flex-item">1</div>
70 <div class="flex-item">2</div> 69 <div class="flex-item">2</div>
71 <div class="flex-item">3</div> 70 <div class="flex-item">3</div>
72 </fieldset> 71 </summary>
73 72
74 <h1>flex-direction: column</h1> 73 <h1>flex-direction: column</h1>
75 <fieldset class="flex-container flex-direction-column"> 74 <summary class="flex-container flex-direction-column">
76 <div class="flex-item">1</div> 75 <div class="flex-item">1</div>
77 <div class="flex-item">2</div> 76 <div class="flex-item">2</div>
78 <div class="flex-item">3</div> 77 <div class="flex-item">3</div>
79 </fieldset> 78 </summary>
80 79
81 <h1>flex-direction: column-reverse</h1> 80 <h1>flex-direction: column-reverse</h1>
82 <fieldset class="flex-container flex-direction-column-reverse"> 81 <summary class="flex-container flex-direction-column-reverse">
83 <div class="flex-item">1</div> 82 <div class="flex-item">1</div>
84 <div class="flex-item">2</div> 83 <div class="flex-item">2</div>
85 <div class="flex-item">3</div> 84 <div class="flex-item">3</div>
86 </fieldset> 85 </summary>
87 86
88 <h1>justify-content: center</h1> 87 <h1>justify-content: center</h1>
89 <fieldset class="flex-container justify-content-center"> 88 <summary class="flex-container justify-content-center">
90 <div class="flex-item">1</div> 89 <div class="flex-item">1</div>
91 <div class="flex-item">2</div> 90 <div class="flex-item">2</div>
92 <div class="flex-item">3</div> 91 <div class="flex-item">3</div>
93 </fieldset> 92 </summary>
94 93
95 <h1>justify-content: space-around</h1> 94 <h1>justify-content: space-around</h1>
96 <fieldset class="flex-container justify-content-space-around"> 95 <summary class="flex-container justify-content-space-around">
97 <div class="flex-item">1</div> 96 <div class="flex-item">1</div>
98 <div class="flex-item">2</div> 97 <div class="flex-item">2</div>
99 <div class="flex-item">3</div> 98 <div class="flex-item">3</div>
100 </fieldset> 99 </summary>
101 100
102 <h1>justify-content: space-between</h1> 101 <h1>justify-content: space-between</h1>
103 <fieldset class="flex-container justify-content-space-between"> 102 <summary class="flex-container justify-content-space-between">
104 <div class="flex-item">1</div> 103 <div class="flex-item">1</div>
105 <div class="flex-item">2</div> 104 <div class="flex-item">2</div>
106 <div class="flex-item">3</div> 105 <div class="flex-item">3</div>
107 </fieldset> 106 </summary>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/html/summary-display-grid-expected.html ('k') | third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698