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

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

Issue 2670273002: Move tests for DETAILS and SUMMARY elements to html/details_summary/. (Closed)
Patch Set: Created 3 years, 10 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <style>
3 .flex-container {
4 background: #333;
5 border: 0px;
6 display: inline-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 <summary style="display: inline-flex;">
54 <div>these fields</div>
55 <div>shouldn't be</div>
56 <div>stacked vertically</div>
57 </summary>
58
59 <h1>flex-direction: row</h1>
60 <summary class="flex-container flex-direction-row">
61 <div class="flex-item">1</div>
62 <div class="flex-item">2</div>
63 <div class="flex-item">3</div>
64 </summary>
65
66 <h1>flex-direction: row-reverse</h1>
67 <summary class="flex-container flex-direction-row-reverse">
68 <div class="flex-item">1</div>
69 <div class="flex-item">2</div>
70 <div class="flex-item">3</div>
71 </summary>
72
73 <h1>flex-direction: column</h1>
74 <summary class="flex-container flex-direction-column">
75 <div class="flex-item">1</div>
76 <div class="flex-item">2</div>
77 <div class="flex-item">3</div>
78 </summary>
79
80 <h1>flex-direction: column-reverse</h1>
81 <summary class="flex-container flex-direction-column-reverse">
82 <div class="flex-item">1</div>
83 <div class="flex-item">2</div>
84 <div class="flex-item">3</div>
85 </summary>
86
87 <h1>justify-content: center</h1>
88 <summary class="flex-container justify-content-center">
89 <div class="flex-item">1</div>
90 <div class="flex-item">2</div>
91 <div class="flex-item">3</div>
92 </summary>
93
94 <h1>justify-content: space-around</h1>
95 <summary class="flex-container justify-content-space-around">
96 <div class="flex-item">1</div>
97 <div class="flex-item">2</div>
98 <div class="flex-item">3</div>
99 </summary>
100
101 <h1>justify-content: space-between</h1>
102 <summary class="flex-container justify-content-space-between">
103 <div class="flex-item">1</div>
104 <div class="flex-item">2</div>
105 <div class="flex-item">3</div>
106 </summary>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698