Skip to content

Commit f229cae

Browse files
Sub6ResourcesSub6Resources
committed
feat: Expand Display support
1 parent 79ec194 commit f229cae

File tree

2 files changed

+268
-12
lines changed

2 files changed

+268
-12
lines changed

‎lib/src/style.dart

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'package:flutter_html/flutter_html.dart';
55
import 'package:flutter_html/src/css_parser.dart';
66

77
//Export Style value-unit APIs
8+
export 'package:flutter_html/src/style/display.dart';
89
export 'package:flutter_html/src/style/margin.dart';
910
export 'package:flutter_html/src/style/padding.dart';
1011
export 'package:flutter_html/src/style/length.dart';
@@ -49,7 +50,7 @@ class Style {
4950
/// CSS attribute "`display`"
5051
///
5152
/// Inherited: no,
52-
/// Default: unspecified,
53+
/// Default: inline,
5354
Display? display;
5455

5556
/// CSS attribute "`font-family`"
@@ -271,8 +272,7 @@ class Style {
271272
this.textOverflow,
272273
this.textTransform = TextTransform.none,
273274
}) {
274-
if (alignment == null &&
275-
(display == Display.block || display == Display.listItem)) {
275+
if (alignment == null && (display?.isBlock ?? false)) {
276276
alignment = Alignment.centerLeft;
277277
}
278278
}
@@ -591,14 +591,6 @@ extension MergeBorders on Border? {
591591
}
592592
}
593593

594-
enum Display {
595-
block,
596-
inline,
597-
inlineBlock,
598-
listItem,
599-
none,
600-
}
601-
602594
enum ListStyleType {
603595
arabicIndic('arabic-indic'),
604596
armenian('armenian'),
@@ -692,7 +684,32 @@ enum VerticalAlign {
692684
sup,
693685
top,
694686
bottom,
695-
middle,
687+
middle;
688+
689+
/// Converts this [VerticalAlign] to a [PlaceholderAlignment] given the
690+
/// [Display] type of the current context
691+
PlaceholderAlignment toPlaceholderAlignment(Display? display) {
692+
693+
// vertical-align only applies to inline context elements.
694+
// If we aren't in such a context, use the default 'bottom' alignment.
695+
if(display != Display.inline && display != Display.inlineBlock) {
696+
return PlaceholderAlignment.bottom;
697+
}
698+
699+
switch(this) {
700+
case VerticalAlign.baseline:
701+
case VerticalAlign.sub:
702+
case VerticalAlign.sup:
703+
return PlaceholderAlignment.baseline;
704+
case VerticalAlign.top:
705+
return PlaceholderAlignment.top;
706+
case VerticalAlign.bottom:
707+
return PlaceholderAlignment.bottom;
708+
case VerticalAlign.middle:
709+
return PlaceholderAlignment.middle;
710+
}
711+
712+
}
696713
}
697714

698715
enum WhiteSpace {

‎lib/src/style/display.dart

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
/// Equivalent to CSS `display`
2+
///
3+
/// (https://www.w3.org/TR/css-display-3/#the-display-properties)
4+
enum Display {
5+
/// Equivalent to css `display: none;`
6+
none (
7+
displayBox: DisplayBox.none,
8+
),
9+
10+
/// Equivalent to css `display: contents;`
11+
///
12+
/// Not supported by flutter_html
13+
contents (
14+
displayBox: DisplayBox.contents,
15+
),
16+
17+
/// Equivalent to css `display: block;`
18+
block (
19+
displayOutside: DisplayOutside.block,
20+
displayInside: DisplayInside.flow,
21+
),
22+
23+
/// Equivalent to css `display: flow-root;`
24+
///
25+
/// Not supported by flutter_html
26+
flowRoot (
27+
displayOutside: DisplayOutside.block,
28+
displayInside: DisplayInside.flowRoot,
29+
),
30+
31+
/// Equivalent to css `display: inline;`
32+
inline (
33+
displayOutside: DisplayOutside.inline,
34+
displayInside: DisplayInside.flow,
35+
),
36+
37+
/// Equivalent to css `display: inline-block;`
38+
inlineBlock (
39+
displayOutside: DisplayOutside.inline,
40+
displayInside: DisplayInside.flowRoot,
41+
),
42+
43+
/// Equivalent to css `display: run-in;`
44+
///
45+
/// Not supported by flutter_html
46+
runIn (
47+
displayOutside: DisplayOutside.runIn,
48+
displayInside: DisplayInside.flow,
49+
),
50+
51+
/// Equivalent to css `display: list-item;`
52+
listItem (
53+
displayOutside: DisplayOutside.block,
54+
displayInside: DisplayInside.flow,
55+
displayListItem: true,
56+
),
57+
58+
/// Equivalent to css `display: inline list-item;`
59+
inlineListItem (
60+
displayOutside: DisplayOutside.inline,
61+
displayInside: DisplayInside.flow,
62+
displayListItem: true,
63+
),
64+
65+
/// Equivalent to css `display: flex;`
66+
///
67+
/// Not supported by flutter_html
68+
flex (
69+
displayOutside: DisplayOutside.block,
70+
displayInside: DisplayInside.flex,
71+
),
72+
73+
/// Equivalent to css `display: inline-flex;`
74+
///
75+
/// Not supported by flutter_html
76+
inlineFlex (
77+
displayOutside: DisplayOutside.inline,
78+
displayInside: DisplayInside.flex,
79+
),
80+
81+
/// Equivalent to css `display: grid;`
82+
///
83+
/// Not supported by flutter_html
84+
grid (
85+
displayOutside: DisplayOutside.block,
86+
displayInside: DisplayInside.grid,
87+
),
88+
89+
/// Equivalent to css `display: inline-grid;`
90+
///
91+
/// Not supported by flutter_html
92+
inlineGrid (
93+
displayOutside: DisplayOutside.inline,
94+
displayInside: DisplayInside.grid,
95+
),
96+
97+
/// Equivalent to css `display: ruby;`
98+
ruby (
99+
displayOutside: DisplayOutside.inline,
100+
displayInside: DisplayInside.ruby,
101+
),
102+
103+
/// Equivalent to css `display: block ruby;`
104+
blockRuby (
105+
displayOutside: DisplayOutside.block,
106+
displayInside: DisplayInside.ruby,
107+
),
108+
109+
/// Equivalent to css `display: table;`
110+
table (
111+
displayOutside: DisplayOutside.block,
112+
displayInside: DisplayInside.table,
113+
),
114+
115+
/// Equivalent to css `display: inline-table;`
116+
inlineTable (
117+
displayOutside: DisplayOutside.inline,
118+
displayInside: DisplayInside.table,
119+
),
120+
121+
/// Equivalent to css `display: table-row-group;`
122+
tableRowGroup (
123+
displayInternal: DisplayInternal.tableRowGroup,
124+
),
125+
126+
/// Equivalent to css `display: table-header-group;`
127+
tableHeaderGroup (
128+
displayInternal: DisplayInternal.tableHeaderGroup,
129+
),
130+
131+
/// Equivalent to css `display: table-footer-group;`
132+
tableFooterGroup (
133+
displayInternal: DisplayInternal.tableFooterGroup,
134+
),
135+
136+
/// Equivalent to css `display: table-row;`
137+
tableRow (
138+
displayInternal: DisplayInternal.tableRowGroup,
139+
),
140+
141+
/// Equivalent to css `display: table-cell;`
142+
tableCell (
143+
displayInternal: DisplayInternal.tableCell,
144+
displayInside: DisplayInside.flowRoot,
145+
),
146+
147+
/// Equivalent to css `display: table-column-group;`
148+
tableColumnGroup (
149+
displayInternal: DisplayInternal.tableColumnGroup,
150+
),
151+
152+
/// Equivalent to css `display: table-column;`
153+
tableColumn (
154+
displayInternal: DisplayInternal.tableColumn,
155+
),
156+
157+
/// Equivalent to css `display: table-caption;`
158+
tableCaption (
159+
displayInternal: DisplayInternal.tableCaption,
160+
displayInside: DisplayInside.flowRoot,
161+
),
162+
163+
/// Equivalent to css `display: ruby-base;`
164+
rubyBase (
165+
displayInternal: DisplayInternal.rubyBase,
166+
displayInside: DisplayInside.flow,
167+
),
168+
169+
/// Equivalent to css `display: ruby-text;`
170+
rubyText (
171+
displayInternal: DisplayInternal.rubyText,
172+
displayInside: DisplayInside.flow,
173+
),
174+
175+
/// Equivalent to css `display: ruby-base-container;`
176+
rubyBaseContainer (
177+
displayInternal: DisplayInternal.rubyBaseContainer,
178+
),
179+
180+
/// Equivalent to css `display: ruby-text-container;`
181+
rubyTextContainer (
182+
displayInternal: DisplayInternal.rubyTextContainer,
183+
);
184+
185+
const Display({
186+
this.displayOutside,
187+
this.displayInside,
188+
this.displayListItem = false,
189+
this.displayInternal,
190+
this.displayBox,
191+
});
192+
193+
final DisplayOutside? displayOutside;
194+
final DisplayInside? displayInside;
195+
final bool displayListItem;
196+
final DisplayInternal? displayInternal;
197+
final DisplayBox? displayBox;
198+
199+
/// Evaluates to `true` if `displayOutside` is equal to
200+
/// `DisplayOutside.block`.
201+
bool get isBlock {
202+
return displayOutside == DisplayOutside.block;
203+
}
204+
}
205+
206+
enum DisplayOutside {
207+
block,
208+
inline,
209+
runIn, // not supported
210+
}
211+
212+
enum DisplayInside {
213+
flow,
214+
flowRoot,
215+
table,
216+
flex, // not supported
217+
grid, // not supported
218+
ruby,
219+
}
220+
221+
enum DisplayInternal {
222+
tableRowGroup,
223+
tableHeaderGroup,
224+
tableFooterGroup,
225+
tableRow,
226+
tableCell,
227+
tableColumnGroup,
228+
tableColumn,
229+
tableCaption,
230+
rubyBase,
231+
rubyText,
232+
rubyBaseContainer,
233+
rubyTextContainer,
234+
}
235+
236+
enum DisplayBox {
237+
contents, // not supported
238+
none,
239+
}

0 commit comments

Comments
 (0)