Skip to content

Commit 161d51a

Browse files
fschuttfschutt
committed
Fixed background property not being rendered
1 parent 778f251 commit 161d51a

File tree

4 files changed

+30
-72
lines changed

4 files changed

+30
-72
lines changed

‎azul-core/src/display_list.rs

+3-1
Original file line numberDiff line numberDiff line change
@@ -878,7 +878,9 @@ pub fn displaylist_handle_rect<'a>(
878878
frame.box_shadow = box_shadow;
879879

880880
// push background
881-
let bg_opt = layout_result.styled_dom.get_css_property_cache().get_background(&html_node, &rect_idx, &styled_node.state);
881+
let bg_opt = layout_result.styled_dom.get_css_property_cache()
882+
.get_background_content(&html_node, &rect_idx, &styled_node.state);
883+
882884
if let Some(bg) = bg_opt.as_ref().and_then(|br| br.get_property()) {
883885

884886
use azul_css::{StyleBackgroundSizeVec, StyleBackgroundPositionVec, StyleBackgroundRepeatVec};

‎azul-core/src/styled_dom.rs

+9-7
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,7 @@ impl CssPropertyCache {
214214
&node_data,
215215
&html_tree,
216216
$expected_pseudo_selector
217-
)
218-
)
217+
))
219218
// rule matched, now copy all the styles of this rule
220219
.flat_map(|matched_rule| {
221220
matched_rule.declarations
@@ -358,7 +357,7 @@ impl CssPropertyCache {
358357

359358
pub fn get_computed_css_style_string(&self, node_data: &NodeData, node_id: &NodeId, node_state: &StyledNodeState) -> String {
360359
let mut s = String::new();
361-
if let Some(p) = self.get_background(&node_data, node_id, node_state) { s.push_str(&format!("background: {};", p.get_css_value_fmt())); }
360+
if let Some(p) = self.get_background_content(&node_data, node_id, node_state) { s.push_str(&format!("background: {};", p.get_css_value_fmt())); }
362361
if let Some(p) = self.get_background_position(&node_data, node_id, node_state) { s.push_str(&format!("background-position: {};", p.get_css_value_fmt())); }
363362
if let Some(p) = self.get_background_size(&node_data, node_id, node_state) { s.push_str(&format!("background-size: {};", p.get_css_value_fmt())); }
364363
if let Some(p) = self.get_background_repeat(&node_data, node_id, node_state) { s.push_str(&format!("background-repeat: {};", p.get_css_value_fmt())); }
@@ -641,8 +640,8 @@ impl CssPropertyCache {
641640
self.get_box_shadow_bottom(node_data, node_id, node_state).is_some()
642641
}
643642

644-
pub fn get_background(&self, node_data: &NodeData, node_id: &NodeId, node_state: &StyledNodeState) -> Option<StyleBackgroundContentVecValue> {
645-
get_property!(self, node_data, node_id, node_state, CssPropertyType::Background, as_background)
643+
pub fn get_background_content(&self, node_data: &NodeData, node_id: &NodeId, node_state: &StyledNodeState) -> Option<StyleBackgroundContentVecValue> {
644+
get_property!(self, node_data, node_id, node_state, CssPropertyType::BackgroundContent, as_background_content)
646645
}
647646
pub fn get_background_position(&self, node_data: &NodeData, node_id: &NodeId, node_state: &StyledNodeState) -> Option<StyleBackgroundPositionVecValue> {
648647
get_property!(self, node_data, node_id, node_state, CssPropertyType::BackgroundPosition, as_background_position)
@@ -1450,8 +1449,11 @@ impl StyledDom {
14501449
}
14511450

14521451
// If the node has a CSS background image, it needs to be uploaded
1453-
if let Some(style_backgrounds) = self.get_css_property_cache().get_background(&node_data, &node_id, &self.styled_nodes.as_container()[node_id].state) {
1454-
v.background_image = style_backgrounds.get_property().unwrap_or(&default_backgrounds).iter().filter_map(|bg| {
1452+
if let Some(style_backgrounds) = self.get_css_property_cache()
1453+
.get_background_content(&node_data, &node_id, &self.styled_nodes.as_container()[node_id].state) {
1454+
v.background_image = style_backgrounds.get_property().unwrap_or(&default_backgrounds)
1455+
.iter()
1456+
.filter_map(|bg| {
14551457
let css_image_id = bg.get_css_image_id()?;
14561458
let image_id = app_resources.get_css_image_id(css_image_id.inner.as_str())?;
14571459
Some(*image_id)

‎azul-css-parser/src/css_parser.rs

+1-3
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,7 @@ pub fn parse_css_property<'a>(key: CssPropertyType, value: &'a str) -> Result<Cs
237237
AlignItems => parse_layout_align_items(value)?.into(),
238238
AlignContent => parse_layout_align_content(value)?.into(),
239239

240-
Background => parse_style_background_content_multiple(value)?.into(),
241-
BackgroundImage => StyleBackgroundContentVec::from(vec![StyleBackgroundContent::Image(parse_image(value)?)]).into(),
242-
BackgroundColor => StyleBackgroundContentVec::from(vec![StyleBackgroundContent::Color(parse_css_color(value)?)]).into(),
240+
BackgroundContent => parse_style_background_content_multiple(value)?.into(),
243241
BackgroundPosition => parse_style_background_position_multiple(value)?.into(),
244242
BackgroundSize => parse_style_background_size_multiple(value)?.into(),
245243
BackgroundRepeat => parse_style_background_repeat_multiple(value)?.into(),

‎azul-css/src/css_properties.rs

+17-61
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const COMBINED_CSS_PROPERTIES_KEY_MAP: [(CombinedCssPropertyType, &'static str);
2525
];
2626

2727
/// Map between CSS keys and a statically typed enum
28-
const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);72] = [
28+
const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);70] = [
2929

3030
(CssPropertyType::Display, "display"),
3131
(CssPropertyType::Float, "float"),
@@ -76,9 +76,7 @@ const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);72] = [
7676
(CssPropertyType::MarginRight, "margin-right"),
7777
(CssPropertyType::MarginBottom, "margin-bottom"),
7878

79-
(CssPropertyType::Background, "background"),
80-
(CssPropertyType::BackgroundImage, "background-image"),
81-
(CssPropertyType::BackgroundColor, "background-color"),
79+
(CssPropertyType::BackgroundContent, "background"),
8280
(CssPropertyType::BackgroundPosition, "background-position"),
8381
(CssPropertyType::BackgroundSize, "background-size"),
8482
(CssPropertyType::BackgroundRepeat, "background-repeat"),
@@ -103,12 +101,12 @@ const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);72] = [
103101
(CssPropertyType::BorderLeftWidth, "border-left-width"),
104102
(CssPropertyType::BorderBottomWidth, "border-bottom-width"),
105103

106-
(CssPropertyType::BoxShadowTop, "box-shadow-top"),
107-
(CssPropertyType::BoxShadowRight, "box-shadow-right"),
108-
(CssPropertyType::BoxShadowLeft, "box-shadow-left"),
109-
(CssPropertyType::BoxShadowBottom, "box-shadow-bottom"),
104+
(CssPropertyType::BoxShadowTop, "-azul-box-shadow-top"),
105+
(CssPropertyType::BoxShadowRight, "-azul-box-shadow-right"),
106+
(CssPropertyType::BoxShadowLeft, "-azul-box-shadow-left"),
107+
(CssPropertyType::BoxShadowBottom, "-azul-box-shadow-bottom"),
110108

111-
(CssPropertyType::ScrollbarStyle, "scrollbar-style"), // TODO: non-standard
109+
(CssPropertyType::ScrollbarStyle, "-azul-scrollbar-style"),
112110

113111
(CssPropertyType::Opacity, "opacity"),
114112
(CssPropertyType::Transform, "transform"),
@@ -689,18 +687,15 @@ pub fn get_css_key_map() -> CssKeyMap {
689687
#[derive(Debug, Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)]
690688
#[repr(C)]
691689
pub enum CssPropertyType {
692-
693690
TextColor,
694691
FontSize,
695692
FontFamily,
696693
TextAlign,
697-
698694
LetterSpacing,
699695
LineHeight,
700696
WordSpacing,
701697
TabWidth,
702698
Cursor,
703-
704699
Display,
705700
Float,
706701
BoxSizing,
@@ -710,75 +705,58 @@ pub enum CssPropertyType {
710705
MinHeight,
711706
MaxWidth,
712707
MaxHeight,
713-
714708
Position,
715709
Top,
716710
Right,
717711
Left,
718712
Bottom,
719-
720713
FlexWrap,
721714
FlexDirection,
722715
FlexGrow,
723716
FlexShrink,
724717
JustifyContent,
725718
AlignItems,
726719
AlignContent,
727-
720+
BackgroundContent,
721+
BackgroundPosition,
722+
BackgroundSize,
723+
BackgroundRepeat,
728724
OverflowX,
729725
OverflowY,
730-
731726
PaddingTop,
732727
PaddingLeft,
733728
PaddingRight,
734729
PaddingBottom,
735-
736730
MarginTop,
737731
MarginLeft,
738732
MarginRight,
739733
MarginBottom,
740-
741-
Background,
742-
BackgroundImage, // -> BackgroundContent::Image
743-
BackgroundColor, // -> BackgroundContent::Color
744-
BackgroundPosition,
745-
BackgroundSize,
746-
BackgroundRepeat,
747-
748734
BorderTopLeftRadius,
749735
BorderTopRightRadius,
750736
BorderBottomLeftRadius,
751737
BorderBottomRightRadius,
752-
753738
BorderTopColor,
754739
BorderRightColor,
755740
BorderLeftColor,
756741
BorderBottomColor,
757-
758742
BorderTopStyle,
759743
BorderRightStyle,
760744
BorderLeftStyle,
761745
BorderBottomStyle,
762-
763746
BorderTopWidth,
764747
BorderRightWidth,
765748
BorderLeftWidth,
766749
BorderBottomWidth,
767-
768750
BoxShadowLeft,
769751
BoxShadowRight,
770752
BoxShadowTop,
771753
BoxShadowBottom,
772-
773754
ScrollbarStyle,
774-
775-
// GPU properties:
776755
Opacity,
777756
Transform,
778-
PerspectiveOrigin,
779757
TransformOrigin,
758+
PerspectiveOrigin,
780759
BackfaceVisibility,
781-
// Color? - update webrender to use GPU colors
782760
}
783761

784762
impl CssPropertyType {
@@ -832,9 +810,7 @@ impl CssPropertyType {
832810
CssPropertyType::JustifyContent => "justify-content",
833811
CssPropertyType::AlignItems => "align-items",
834812
CssPropertyType::AlignContent => "align-content",
835-
CssPropertyType::Background => "background",
836-
CssPropertyType::BackgroundColor => "background",
837-
CssPropertyType::BackgroundImage => "background",
813+
CssPropertyType::BackgroundContent => "background",
838814
CssPropertyType::BackgroundPosition => "background-position",
839815
CssPropertyType::BackgroundSize => "background-size",
840816
CssPropertyType::BackgroundRepeat => "background-repeat",
@@ -904,11 +880,10 @@ impl CssPropertyType {
904880
match self {
905881
| TextColor
906882
| Cursor
907-
| Background
883+
| BackgroundContent
908884
| BackgroundPosition
909885
| BackgroundSize
910886
| BackgroundRepeat
911-
| BackgroundImage
912887
| BorderTopLeftRadius
913888
| BorderTopRightRadius
914889
| BorderBottomLeftRadius
@@ -951,88 +926,71 @@ impl fmt::Display for CssPropertyType {
951926
#[derive(Debug, Clone, PartialEq, Eq, Hash, PartialOrd, Ord)]
952927
#[repr(C, u8)]
953928
pub enum CssProperty {
954-
955929
TextColor(CssPropertyValue<StyleTextColor>),
956930
FontSize(CssPropertyValue<StyleFontSize>),
957931
FontFamily(CssPropertyValue<StyleFontFamily>),
958932
TextAlign(CssPropertyValue<StyleTextAlignmentHorz>),
959-
960933
LetterSpacing(CssPropertyValue<StyleLetterSpacing>),
961934
LineHeight(CssPropertyValue<StyleLineHeight>),
962935
WordSpacing(CssPropertyValue<StyleWordSpacing>),
963936
TabWidth(CssPropertyValue<StyleTabWidth>),
964937
Cursor(CssPropertyValue<StyleCursor>),
965-
966938
Display(CssPropertyValue<LayoutDisplay>),
967939
Float(CssPropertyValue<LayoutFloat>),
968940
BoxSizing(CssPropertyValue<LayoutBoxSizing>),
969-
970941
Width(CssPropertyValue<LayoutWidth>),
971942
Height(CssPropertyValue<LayoutHeight>),
972943
MinWidth(CssPropertyValue<LayoutMinWidth>),
973944
MinHeight(CssPropertyValue<LayoutMinHeight>),
974945
MaxWidth(CssPropertyValue<LayoutMaxWidth>),
975946
MaxHeight(CssPropertyValue<LayoutMaxHeight>),
976-
977947
Position(CssPropertyValue<LayoutPosition>),
978948
Top(CssPropertyValue<LayoutTop>),
979949
Right(CssPropertyValue<LayoutRight>),
980950
Left(CssPropertyValue<LayoutLeft>),
981951
Bottom(CssPropertyValue<LayoutBottom>),
982-
983952
FlexWrap(CssPropertyValue<LayoutFlexWrap>),
984953
FlexDirection(CssPropertyValue<LayoutFlexDirection>),
985954
FlexGrow(CssPropertyValue<LayoutFlexGrow>),
986955
FlexShrink(CssPropertyValue<LayoutFlexShrink>),
987956
JustifyContent(CssPropertyValue<LayoutJustifyContent>),
988957
AlignItems(CssPropertyValue<LayoutAlignItems>),
989958
AlignContent(CssPropertyValue<LayoutAlignContent>),
990-
991959
BackgroundContent(CssPropertyValue<StyleBackgroundContentVec>),
992960
BackgroundPosition(CssPropertyValue<StyleBackgroundPositionVec>),
993961
BackgroundSize(CssPropertyValue<StyleBackgroundSizeVec>),
994962
BackgroundRepeat(CssPropertyValue<StyleBackgroundRepeatVec>),
995-
996963
OverflowX(CssPropertyValue<LayoutOverflow>),
997964
OverflowY(CssPropertyValue<LayoutOverflow>),
998-
999965
PaddingTop(CssPropertyValue<LayoutPaddingTop>),
1000966
PaddingLeft(CssPropertyValue<LayoutPaddingLeft>),
1001967
PaddingRight(CssPropertyValue<LayoutPaddingRight>),
1002968
PaddingBottom(CssPropertyValue<LayoutPaddingBottom>),
1003-
1004969
MarginTop(CssPropertyValue<LayoutMarginTop>),
1005970
MarginLeft(CssPropertyValue<LayoutMarginLeft>),
1006971
MarginRight(CssPropertyValue<LayoutMarginRight>),
1007972
MarginBottom(CssPropertyValue<LayoutMarginBottom>),
1008-
1009973
BorderTopLeftRadius(CssPropertyValue<StyleBorderTopLeftRadius>),
1010974
BorderTopRightRadius(CssPropertyValue<StyleBorderTopRightRadius>),
1011975
BorderBottomLeftRadius(CssPropertyValue<StyleBorderBottomLeftRadius>),
1012976
BorderBottomRightRadius(CssPropertyValue<StyleBorderBottomRightRadius>),
1013-
1014977
BorderTopColor(CssPropertyValue<StyleBorderTopColor>),
1015978
BorderRightColor(CssPropertyValue<StyleBorderRightColor>),
1016979
BorderLeftColor(CssPropertyValue<StyleBorderLeftColor>),
1017980
BorderBottomColor(CssPropertyValue<StyleBorderBottomColor>),
1018-
1019981
BorderTopStyle(CssPropertyValue<StyleBorderTopStyle>),
1020982
BorderRightStyle(CssPropertyValue<StyleBorderRightStyle>),
1021983
BorderLeftStyle(CssPropertyValue<StyleBorderLeftStyle>),
1022984
BorderBottomStyle(CssPropertyValue<StyleBorderBottomStyle>),
1023-
1024985
BorderTopWidth(CssPropertyValue<LayoutBorderTopWidth>),
1025986
BorderRightWidth(CssPropertyValue<LayoutBorderRightWidth>),
1026987
BorderLeftWidth(CssPropertyValue<LayoutBorderLeftWidth>),
1027988
BorderBottomWidth(CssPropertyValue<LayoutBorderBottomWidth>),
1028-
1029989
BoxShadowLeft(CssPropertyValue<StyleBoxShadow>),
1030990
BoxShadowRight(CssPropertyValue<StyleBoxShadow>),
1031991
BoxShadowTop(CssPropertyValue<StyleBoxShadow>),
1032992
BoxShadowBottom(CssPropertyValue<StyleBoxShadow>),
1033-
1034993
ScrollbarStyle(CssPropertyValue<ScrollbarStyle>),
1035-
1036994
Opacity(CssPropertyValue<StyleOpacity>),
1037995
Transform(CssPropertyValue<StyleTransformVec>),
1038996
TransformOrigin(CssPropertyValue<StyleTransformOrigin>),
@@ -1176,9 +1134,7 @@ macro_rules! css_property_from_type {($prop_type:expr, $content_type:ident) => (
11761134
CssPropertyType::MarginLeft => CssProperty::MarginLeft(CssPropertyValue::$content_type),
11771135
CssPropertyType::MarginRight => CssProperty::MarginRight(CssPropertyValue::$content_type),
11781136
CssPropertyType::MarginBottom => CssProperty::MarginBottom(CssPropertyValue::$content_type),
1179-
CssPropertyType::Background => CssProperty::BackgroundContent(CssPropertyValue::$content_type),
1180-
CssPropertyType::BackgroundImage => CssProperty::BackgroundContent(CssPropertyValue::$content_type), // -> BackgroundContent::Image
1181-
CssPropertyType::BackgroundColor => CssProperty::BackgroundContent(CssPropertyValue::$content_type), // -> BackgroundContent::Color
1137+
CssPropertyType::BackgroundContent => CssProperty::BackgroundContent(CssPropertyValue::$content_type),
11821138
CssPropertyType::BackgroundPosition => CssProperty::BackgroundPosition(CssPropertyValue::$content_type),
11831139
CssPropertyType::BackgroundSize => CssProperty::BackgroundSize(CssPropertyValue::$content_type),
11841140
CssPropertyType::BackgroundRepeat => CssProperty::BackgroundRepeat(CssPropertyValue::$content_type),
@@ -1246,7 +1202,7 @@ impl CssProperty {
12461202
CssProperty::JustifyContent(_) => CssPropertyType::JustifyContent,
12471203
CssProperty::AlignItems(_) => CssPropertyType::AlignItems,
12481204
CssProperty::AlignContent(_) => CssPropertyType::AlignContent,
1249-
CssProperty::BackgroundContent(_) => CssPropertyType::BackgroundImage, // TODO: wrong!
1205+
CssProperty::BackgroundContent(_) => CssPropertyType::BackgroundContent,
12501206
CssProperty::BackgroundPosition(_) => CssPropertyType::BackgroundPosition,
12511207
CssProperty::BackgroundSize(_) => CssPropertyType::BackgroundSize,
12521208
CssProperty::BackgroundRepeat(_) => CssPropertyType::BackgroundRepeat,
@@ -1368,7 +1324,7 @@ impl CssProperty {
13681324

13691325
// functions that downcast to the concrete CSS type (style)
13701326

1371-
pub const fn as_background(&self) -> Option<&StyleBackgroundContentVecValue> { match self { CssProperty::BackgroundContent(f) => Some(f), _ => None, } }
1327+
pub const fn as_background_content(&self) -> Option<&StyleBackgroundContentVecValue> { match self { CssProperty::BackgroundContent(f) => Some(f), _ => None, } }
13721328
pub const fn as_background_position(&self) -> Option<&StyleBackgroundPositionVecValue> { match self { CssProperty::BackgroundPosition(f) => Some(f), _ => None, } }
13731329
pub const fn as_background_size(&self) -> Option<&StyleBackgroundSizeVecValue> { match self { CssProperty::BackgroundSize(f) => Some(f), _ => None, } }
13741330
pub const fn as_background_repeat(&self) -> Option<&StyleBackgroundRepeatVecValue> { match self { CssProperty::BackgroundRepeat(f) => Some(f), _ => None, } }

0 commit comments

Comments
 (0)