new test and minor fixes (#1426)

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) {

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