diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js index a31f29fa03..5fdfdb76c8 100644 --- a/fastn-js/js/dom.js +++ b/fastn-js/js/dom.js @@ -99,7 +99,8 @@ fastn_dom.propertyMap = { "-webkit-box-orient": "wbo", "-webkit-line-clamp": "wlc", "backdrop-filter": "bdf", - "mask": "mask", + "mask-image": "mi", + "-webkit-mask-image": "wmi", }; // dynamic-class-css.md @@ -281,7 +282,7 @@ fastn_dom.PropertyKind = { TextShadow: 117, Selectable: 118, BackdropFilter: 119, - Mask: 120, + MaskImage: 120, }; @@ -667,69 +668,6 @@ fastn_dom.MaskImage = { }, } -fastn_dom.MaskClip = { - BorderBox: (value) => { - return [1, value]; - }, - ContentBox: (value) => { - return [2, value]; - }, - PaddingBox: (value) => { - return [3, value]; - }, - FillBox: (value) => { - return [4, value]; - }, - StrokeBox: (value) => { - return [5, value]; - }, - ViewBox: (value) => { - return [6, value]; - }, - NoClip: (value) => { - return [7, value]; - }, - Multi: (value) => { - return [8, value]; - }, -} - -fastn_dom.MaskComposite = { - Add: (value) => { - return [1, value]; - }, - Subtract: (value) => { - return [2, value]; - }, - Intersect: (value) => { - return [3, value]; - }, - Exclude: (value) => { - return [4, value]; - }, - Revert: (value) => { - return [5, value]; - }, - RevertLayer: (value) => { - return [6, value]; - }, -} - -fastn_dom.MaskMode = { - Alpha: (value) => { - return [1, value]; - }, - Luminance: (value) => { - return [2, value]; - }, - MatchSource: (value) => { - return [3, value]; - }, - Multi: (value) => { - return [4, value]; - }, -} - fastn_dom.Event = { Click: 0, MouseEnter: 1, @@ -1128,9 +1066,9 @@ class Node2 { this.attachCss("text-shadow", darkShadowCss, true, `body.dark .${lightClass}`); } } - attachLinearGradientCss(value) { + attachLinearGradientCss(value, property = "background-image") { if (fastn_utils.isNull(value)) { - this.attachCss("background-image", value); + this.attachCss(property, value); return; } var lightGradientString = ""; @@ -1175,10 +1113,10 @@ class Node2 { darkGradientString = darkGradientString.trim().slice(0, -1); if (lightGradientString === darkGradientString) { - this.attachCss("background-image", `linear-gradient(${direction}, ${lightGradientString})`, false); + this.attachCss(property, `linear-gradient(${direction}, ${lightGradientString})`, false); } else { - let lightClass = this.attachCss("background-image", `linear-gradient(${direction}, ${lightGradientString})`,true); - this.attachCss("background-image", `linear-gradient(${direction}, ${darkGradientString})`, true, `body.dark .${lightClass}`); + let lightClass = this.attachCss(property, `linear-gradient(${direction}, ${lightGradientString})`,true); + this.attachCss(property, `linear-gradient(${direction}, ${darkGradientString})`, true, `body.dark .${lightClass}`); } } attachBackgroundImageCss(value) { @@ -1233,6 +1171,23 @@ class Node2 { this.attachCss("background-image", `url(${darkValue})`, true, `body.dark .${lightClass}`); } } + attachMaskImageCss(value, vendorPrefix) { + const propWithPrefix = vendorPrefix ? `${vendorPrefix}-mask-image` : "mask-image"; + if (fastn_utils.isNull(value)) { + this.attachCss(propWithPrefix, value); + return; + } + + let lightValue = fastn_utils.getStaticValue(value.get("light")); + let darkValue = fastn_utils.getStaticValue(value.get("dark")); + + if (lightValue === darkValue) { + this.attachCss(propWithPrefix, `url(${lightValue})`, false); + } else { + let lightClass = this.attachCss(propWithPrefix, `url(${lightValue})`, true); + this.attachCss(propWithPrefix, `url(${darkValue})`, true, `body.dark .${lightClass}`); + } + } attachExternalCss(css) { if (hydrating) { let css_tag = document.createElement('link'); @@ -1605,13 +1560,24 @@ class Node2 { this.attachBackdropMultiFilter(staticValue[1]); break; } - } else if (kind === fastn_dom.PropertyKind.Mask) { + } else if (kind === fastn_dom.PropertyKind.MaskImage) { if (fastn_utils.isNull(staticValue)) { - this.attachCss("backdrop-filter", staticValue); + this.attachCss("mask-image", staticValue); return; } - // todo + const [backgroundType, value] = staticValue; + + switch (backgroundType) { + case fastn_dom.MaskImage.Src()[0]: + this.attachMaskImageCss(value); + this.attachMaskImageCss(value, "-webkit"); + break; + case fastn_dom.MaskImage.LinearGradient()[0]: + this.attachMaskLinearGradientCss(value, "mask-image"); + this.attachMaskLinearGradientCss(value, "-webkit-mask-image"); + break; + } } else if (kind === fastn_dom.PropertyKind.Classes) { fastn_utils.removeNonFastnClasses(this); if (!fastn_utils.isNull(staticValue)) { diff --git a/fastn-js/src/property.rs b/fastn-js/src/property.rs index 4018fb2613..328d26a02a 100644 --- a/fastn-js/src/property.rs +++ b/fastn-js/src/property.rs @@ -427,7 +427,7 @@ pub enum PropertyKind { Favicon, Selectable, BackdropFilter, - Mask, + MaskImage, } impl PropertyKind { @@ -567,7 +567,7 @@ impl PropertyKind { PropertyKind::Favicon => "fastn_dom.PropertyKind.Favicon", PropertyKind::Selectable => "fastn_dom.PropertyKind.Selectable", PropertyKind::BackdropFilter => "fastn_dom.PropertyKind.BackdropFilter", - PropertyKind::Mask => "fastn_dom.PropertyKind.Mask", + PropertyKind::MaskImage => "fastn_dom.PropertyKind.MaskImage", } } } diff --git a/ftd/src/interpreter/constants.rs b/ftd/src/interpreter/constants.rs index 80d83920ec..ba1259e3ac 100644 --- a/ftd/src/interpreter/constants.rs +++ b/ftd/src/interpreter/constants.rs @@ -331,35 +331,6 @@ pub const FTD_BACKDROP_FILTER_SEPIA: &str = "ftd#backdrop-filter.sepia"; pub const FTD_BACKDROP_FILTER_SATURATE: &str = "ftd#backdrop-filter.saturate"; pub const FTD_BACKDROP_FILTER_MULTI: &str = "ftd#backdrop-filter.multi"; -pub const FTD_MASK: &str = "ftd#mask"; pub const FTD_MASK_IMAGE: &str = "ftd#mask-image"; pub const FTD_MASK_IMAGE_SRC: &str = "ftd#mask-image.src"; pub const FTD_MASK_IMAGE_LINEAR_GRADIENT: &str = "ftd#mask-image.linear-gradient"; - -pub const FTD_MASK_CLIP: &str = "ftd#mask-clip"; -pub const FTD_MASK_CLIP_CONTENT_BOX: &str = "ftd#mask-clip.content-box"; -pub const FTD_MASK_CLIP_PADDING_BOX: &str = "ftd#mask-clip.padding-box"; -pub const FTD_MASK_CLIP_BORDER_BOX: &str = "ftd#mask-clip.border-box"; -pub const FTD_MASK_CLIP_FILL_BOX: &str = "ftd#mask-clip.fill-box"; -pub const FTD_MASK_CLIP_STROKE_BOX: &str = "ftd#mask-clip.stroke-box"; -pub const FTD_MASK_CLIP_VIEW_BOX: &str = "ftd#mask-clip.view-box"; -pub const FTD_MASK_CLIP_NO_CLIP: &str = "ftd#mask-clip.no-clip"; -pub const FTD_MASK_CLIP_MULTI_VALUES: &str = "ftd#mask-clip.multi"; - -pub const FTD_MASK_CLIP_MULTI: &str = "ftd#mask-clip-multi"; - -pub const FTD_MASK_COMPOSITE: &str = "ftd#mask-composite"; -pub const FTD_MASK_COMPOSITE_ADD: &str = "ftd#mask-composite.add"; -pub const FTD_MASK_COMPOSITE_SUBTRACT: &str = "ftd#mask-composite.subtract"; -pub const FTD_MASK_COMPOSITE_INTERSECT: &str = "ftd#mask-composite.intersect"; -pub const FTD_MASK_COMPOSITE_EXCLUDE: &str = "ftd#mask-composite.exclude"; -pub const FTD_MASK_COMPOSITE_REVERT: &str = "ftd#mask-composite.revert"; -pub const FTD_MASK_COMPOSITE_REVERT_LAYER: &str = "ftd#mask-composite.revert-layer"; - -pub const FTD_MASK_MODE: &str = "ftd#mask-mode"; -pub const FTD_MASK_MODE_ALPHA: &str = "ftd#mask-mode.alpha"; -pub const FTD_MASK_MODE_LUMINANCE: &str = "ftd#mask-mode.luminance"; -pub const FTD_MASK_MODE_MATCH_SOURCE: &str = "ftd#mask-mode.match-source"; -pub const FTD_MASK_MODE_MULTI_VALUES: &str = "ftd#mask-mode.multi"; - -pub const FTD_MASK_MODE_MULTI: &str = "ftd#mask-mode-multi"; diff --git a/ftd/src/interpreter/things/default.rs b/ftd/src/interpreter/things/default.rs index 5f7d0a0cea..2554ee7a7f 100644 --- a/ftd/src/interpreter/things/default.rs +++ b/ftd/src/interpreter/things/default.rs @@ -9712,7 +9712,7 @@ pub fn default_bag() -> indexmap::IndexMap { variants: vec![ ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new( ftd::interpreter::FTD_MASK_IMAGE_SRC, - ftd::interpreter::Kind::record(ftd::interpreter::FTD_BG_IMAGE) + ftd::interpreter::Kind::record(ftd::interpreter::FTD_IMAGE_SRC) .into_kind_data(), false, None, @@ -9730,365 +9730,6 @@ pub fn default_bag() -> indexmap::IndexMap { line_number: 0, }), ), - ( - ftd::interpreter::FTD_MASK_CLIP_MULTI.to_string(), - ftd::interpreter::Thing::Record(ftd::interpreter::Record { - name: ftd::interpreter::FTD_MASK_CLIP_MULTI.to_string(), - fields: std::iter::IntoIterator::into_iter([ - ftd::interpreter::Field { - name: "content-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "padding-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "border-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "fill-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "stroke-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "view-box".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "no-clip".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ]).collect(), - line_number: 0, - }), - ), - ( - ftd::interpreter::FTD_MASK_CLIP.to_string(), - ftd::interpreter::Thing::OrType(ftd::interpreter::OrType { - name: ftd::interpreter::FTD_MASK_CLIP.to_string(), - variants: vec![ - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_BORDER_BOX, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("border-box") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_CONTENT_BOX, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("content-box") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_FILL_BOX, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("fill-box") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_PADDING_BOX, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("padding-box") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_VIEW_BOX, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("view-box") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_NO_CLIP, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("no-clip") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_CLIP_MULTI_VALUES, - ftd::interpreter::Kind::record(ftd::interpreter::FTD_MASK_CLIP_MULTI) - .into_kind_data(), - false, - None, - 0, - )), - ], - line_number: 0, - }), - ), - ( - ftd::interpreter::FTD_MASK_COMPOSITE.to_string(), - ftd::interpreter::Thing::OrType(ftd::interpreter::OrType { - name: ftd::interpreter::FTD_MASK_COMPOSITE.to_string(), - variants: vec![ - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_ADD, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("add") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_SUBTRACT, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("subtract") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_INTERSECT, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("intersect") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_EXCLUDE, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("exclude") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_REVERT, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("revert") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_COMPOSITE_REVERT_LAYER, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("no-clip") - .into_property_value(false, 0), - ), - 0, - )), - ], - line_number: 0, - }), - ), - ( - ftd::interpreter::FTD_MASK_MODE_MULTI.to_string(), - ftd::interpreter::Thing::Record(ftd::interpreter::Record { - name: ftd::interpreter::FTD_MASK_MODE_MULTI.to_string(), - fields: std::iter::IntoIterator::into_iter([ - ftd::interpreter::Field { - name: "alpha".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "luminance".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - }, - ftd::interpreter::Field { - name: "match-source".to_string(), - kind: ftd::interpreter::Kind::boolean() - .into_optional() - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0, - } - ]).collect(), - line_number: 0, - }), - ), - ( - ftd::interpreter::FTD_MASK_MODE.to_string(), - ftd::interpreter::Thing::OrType(ftd::interpreter::OrType { - name: ftd::interpreter::FTD_MASK_MODE.to_string(), - variants: vec![ - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_MODE_ALPHA, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("alpha") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_MODE_LUMINANCE, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("luminance") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::new_constant(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_MODE_MATCH_SOURCE, - ftd::interpreter::Kind::string().into_kind_data(), - false, - Some( - ftd::interpreter::Value::new_string("match-source") - .into_property_value(false, 0), - ), - 0, - )), - ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new( - ftd::interpreter::FTD_MASK_MODE_MULTI_VALUES, - ftd::interpreter::Kind::record(ftd::interpreter::FTD_MASK_MODE_MULTI) - .into_kind_data(), - false, - None, - 0, - )), - ], - line_number: 0, - }), - ), - ( - ftd::interpreter::FTD_MASK.to_string(), - ftd::interpreter::Thing::Record(ftd::interpreter::Record { - name: ftd::interpreter::FTD_MASK.to_string(), - fields: vec![ - ftd::interpreter::Field { - name: "image".to_string(), - kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_MASK_IMAGE) - .into_kind_data(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0 - }, - ftd::interpreter::Field { - name: "clip".to_string(), - kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_MASK_CLIP) - .into_kind_data() - .into_optional(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0 - }, - ftd::interpreter::Field { - name: "composite".to_string(), - kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_MASK_COMPOSITE) - .into_kind_data() - .into_optional(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0 - }, - ftd::interpreter::Field { - name: "mode".to_string(), - kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_MASK_MODE) - .into_kind_data() - .into_optional(), - mutable: false, - value: None, - access_modifier: Default::default(), - line_number: 0 - }, - ], - line_number: 0 - }) - ), ]) .collect() } @@ -11284,8 +10925,8 @@ fn common_arguments() -> Vec { .into_kind_data(), ), ftd::interpreter::Argument::default( - "mask", - ftd::interpreter::Kind::record(ftd::interpreter::FTD_MASK) + "mask-image", + ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_MASK_IMAGE) .into_optional() .into_kind_data(), ), diff --git a/ftd/src/js/element.rs b/ftd/src/js/element.rs index cdccca909e..302f63a70a 100644 --- a/ftd/src/js/element.rs +++ b/ftd/src/js/element.rs @@ -2225,7 +2225,7 @@ pub struct Common { pub js: Option, pub events: Vec, pub selectable: Option, - pub mask: Option, + pub mask_image: Option, } impl Common { @@ -2441,7 +2441,7 @@ impl Common { whitespace: ftd::js::value::get_optional_js_value("white-space", properties, arguments), shadow: ftd::js::value::get_optional_js_value("shadow", properties, arguments), selectable: ftd::js::value::get_optional_js_value("selectable", properties, arguments), - mask: ftd::js::value::get_optional_js_value("mask", properties, arguments), + mask_image: ftd::js::value::get_optional_js_value("mask-image", properties, arguments), events: events.to_vec(), } } @@ -3039,9 +3039,14 @@ impl Common { ), )); } - if let Some(ref mask) = self.mask { + if let Some(ref mask_image) = self.mask_image { component_statements.push(fastn_js::ComponentStatement::SetProperty( - mask.to_set_property(fastn_js::PropertyKind::Mask, doc, element_name, rdata), + mask_image.to_set_property( + fastn_js::PropertyKind::MaskImage, + doc, + element_name, + rdata, + ), )); } component_statements diff --git a/ftd/src/js/value.rs b/ftd/src/js/value.rs index dd53a8eb73..d2831d059b 100644 --- a/ftd/src/js/value.rs +++ b/ftd/src/js/value.rs @@ -541,18 +541,6 @@ fn ftd_to_js_variant(name: &str, variant: &str) -> (String, bool) { let js_variant = mask_image_variants(variant); (format!("fastn_dom.MaskImage.{}", js_variant), true) } - "ftd#mask-clip" => { - let js_variant = mask_clip_variants(variant); - (format!("fastn_dom.MaskClip.{}", js_variant), true) - } - "ftd#mask-composite" => { - let js_variant = mask_composite_variants(variant); - (format!("fastn_dom.MaskComposite.{}", js_variant), true) - } - "ftd#mask-mode" => { - let js_variant = mask_mode_variants(variant); - (format!("fastn_dom.MaskMode.{}", js_variant), true) - } t => todo!("{} {}", t, variant), } } @@ -924,39 +912,3 @@ fn mask_image_variants(name: &str) -> &'static str { t => todo!("invalid mask image variant {}", t), } } - -fn mask_clip_variants(name: &str) -> &'static str { - match name { - "border-box" => "BorderBox", - "content-box" => "ContentBox", - "padding-box" => "PaddingBox", - "fill-box" => "FillBox", - "stroke-box" => "StrokeBox", - "view-box" => "ViewBox", - "no-clip" => "NoClip", - "multi" => "Multi", - t => unimplemented!("invalid mask clip variant {}", t), - } -} - -fn mask_composite_variants(name: &str) -> &'static str { - match name { - "add" => "Add", - "subtract" => "Subtract", - "intersect" => "Intersect", - "exclude" => "Exclude", - "revert" => "Revert", - "revert-layer" => "RevertLayer", - t => unimplemented!("invalid mask composite variant {}", t), - } -} - -fn mask_mode_variants(name: &str) -> &'static str { - match name { - "alpha" => "Alpha", - "luminance" => "Luminance", - "match-source" => "MatchSource", - "multi" => "Multi", - t => unimplemented!("invalid mask mode variant {}", t), - } -} diff --git a/ftd/t/assets/fastn.svg b/ftd/t/assets/fastn.svg deleted file mode 100644 index 891ded24db..0000000000 --- a/ftd/t/assets/fastn.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ftd/t/js/68-mask.ftd b/ftd/t/js/68-mask.ftd index 8bc8ca6bef..98e064b839 100644 --- a/ftd/t/js/68-mask.ftd +++ b/ftd/t/js/68-mask.ftd @@ -1,12 +1,5 @@ --- ftd.mask m: -image.src: ../assets/fastn.svg -clip: padding-box -composite: add -mode: alpha - --- ftd.row: -mask: $m - --- ftd.text: Hello World - --- end: ftd.row +-- ftd.container: +background.solid: red +mask-image.src: https://mdn.github.io/css-examples/masking/star.svg +width.fixed.px: 300 +height.fixed.px: 300 diff --git a/ftd/t/js/68-mask.html b/ftd/t/js/68-mask.html index 8c6102a60b..b042dad356 100644 --- a/ftd/t/js/68-mask.html +++ b/ftd/t/js/68-mask.html @@ -16,9 +16,14 @@ -
Hello World