From 2980af80edfcf3ae9a0e2f5ca096ff0d4dee67c2 Mon Sep 17 00:00:00 2001
From: Harsh Singh <64768386+harshdoesdev@users.noreply.github.com>
Date: Fri, 27 Oct 2023 13:05:52 +0530
Subject: [PATCH] new test and minor fixes (#1426)
---
fastn-js/js/dom.js | 18 +-
ftd/t/js/68-mask.ftd | 53 ++--
ftd/t/js/68-mask.html | 644 ++++++++++++++++++++++++++++++++++++++----
3 files changed, 623 insertions(+), 92 deletions(-)
diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js
index c2130a83ee..91f6d15c81 100644
--- a/fastn-js/js/dom.js
+++ b/fastn-js/js/dom.js
@@ -1269,7 +1269,7 @@ class Node2 {
const maskDarkImageString = maskDarkImageValues.join(", ");
if(maskLightImageString === maskDarkImageString) {
- this.attachCss(propertyWithPrefix, maskLightImageString, false);
+ this.attachCss(propertyWithPrefix, maskLightImageString, true);
} else {
let lightClass = this.attachCss(propertyWithPrefix, maskLightImageString, true);
this.attachCss(propertyWithPrefix, maskDarkImageString, true, `body.dark .${lightClass}`);
@@ -1306,19 +1306,19 @@ class Node2 {
this.attachMaskSizeCss(value, vendorPrefix);
const maskRepeatValue = fastn_utils.getStaticValue(value.get("repeat"));
if(fastn_utils.isNull(maskRepeatValue)) {
- this.attachCss("mask-repeat", maskRepeatValue);
- this.attachCss("-webkit-mask-repeat", maskRepeatValue);
+ this.attachCss("mask-repeat", maskRepeatValue, true);
+ this.attachCss("-webkit-mask-repeat", maskRepeatValue, true);
} else {
- this.attachCss("mask-repeat", maskRepeatValue);
- this.attachCss("-webkit-mask-repeat", maskRepeatValue);
+ this.attachCss("mask-repeat", maskRepeatValue, true);
+ this.attachCss("-webkit-mask-repeat", maskRepeatValue, true);
}
const maskPositionValue = fastn_utils.getStaticValue(value.get("position"));
if(fastn_utils.isNull(maskPositionValue)) {
- this.attachCss("mask-position", maskPositionValue);
- this.attachCss("-webkit-mask-position", maskPositionValue);
+ this.attachCss("mask-position", maskPositionValue, true);
+ this.attachCss("-webkit-mask-position", maskPositionValue, true);
} else {
- this.attachCss("mask-position", maskPositionValue);
- this.attachCss("-webkit-mask-position", maskPositionValue);
+ this.attachCss("mask-position", maskPositionValue, true);
+ this.attachCss("-webkit-mask-position", maskPositionValue, true);
}
}
attachExternalCss(css) {
diff --git a/ftd/t/js/68-mask.ftd b/ftd/t/js/68-mask.ftd
index 52614fe4dd..d2af189f9a 100644
--- a/ftd/t/js/68-mask.ftd
+++ b/ftd/t/js/68-mask.ftd
@@ -1,39 +1,28 @@
--- ftd.container:
-background.solid: red
-mask.image: https://mdn.github.io/css-examples/masking/star.svg
-width.fixed.px: 300
-height.fixed.px: 300
-
--- ftd.color red-orange:
-light: red
-dark: orange
-
--- ftd.color yellow-blue:
-light: yellow
-dark: blue
-
--- ftd.linear-gradient lg:
-direction: bottom-left
-colors: $color-values
+-- ftd.mask-multi mi:
+image: https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg
+repeat: no-repeat
+position: center
+size: cover
--- ftd.linear-gradient-color list color-values:
+-- component icon:
+caption ftd.color color:
--- ftd.linear-gradient-color: $red-orange
-stop-position.percent: 40
+-- ftd.container:
+background.solid: $icon.color
+mask.multi: $mi
+width.fixed.px: 48
+height.fixed.px: 48
--- ftd.linear-gradient-color: $yellow-blue
+-- end: icon
--- end: color-values
+-- ftd.color list colors: red, orange, yellow, green, blue, indigo, violet, cyan, magenta, lime, olive, maroon, purple, white, #e5e5e5, #ccc, #b2b2b2, #999, #7f7f7f, #666, #4c4c4c, #333, #191919, black
+-- ftd.row:
+width: fill-container
+align-content: center
+wrap: true
--- ftd.mask-multi mi:
-image: https://mdn.github.io/css-examples/masking/star.svg
-size.fixed.rem: 2
-repeat: no-repeat
-position: center
+-- icon: $color
+for: $color in $colors
--- ftd.container:
-background.solid: red
-mask.multi: $mi
-width.fixed.px: 300
-height.fixed.px: 300
+-- end: ftd.row
diff --git a/ftd/t/js/68-mask.html b/ftd/t/js/68-mask.html
index 24b766bd62..32fb620c9c 100644
--- a/ftd/t/js/68-mask.html
+++ b/ftd/t/js/68-mask.html
@@ -16,33 +16,469 @@
-