From af5f5e0c58c6da3f5122bf79eed4fe0a3f4055ff Mon Sep 17 00:00:00 2001
From: Nicolas Peltier <npeltier@adobe.com>
Date: Wed, 9 Sep 2020 10:05:57 +0200
Subject: [PATCH] GH-24 background draft

---
 .../dx/structure/components/flex/.content.xml |  2 +-
 .../dx/structure/components/flex/color.html   | 14 ----
 .../dx/structure/components/flex/flex.html    | 13 ----
 .../adobe/dx/structure/flex/FlexModel.java    |  6 +-
 .../internal/DxBindingsValueProvider.java     |  5 +-
 .../java/com/adobe/dx/img/ImageModel.java     | 34 +++++++++
 ...ies.java => ResponsivePropertiesImpl.java} | 18 ++---
 ...leService.java => InlineStyleService.java} |  4 +-
 .../adobe/dx/style/internal/Background.java   | 70 +++++++++++++++++++
 .../com/adobe/dx/style/internal/Color.java    | 56 +++++++++++++++
 ...eImpl.java => InlineStyleServiceImpl.java} |  6 +-
 .../java/com/adobe/dx/utils/RequestUtil.java  | 25 ++++++-
 .../internal/DxBindingsValueProviderTest.java |  4 +-
 ...java => ResponsivePropertiesImplTest.java} | 23 +++---
 .../internal/AbstractStyleWorkerTest.java     | 20 +++++-
 .../dx/style/internal/BackgroundTest.java     | 56 +++++++++++++++
 .../adobe/dx/style/internal/ColorTest.java    | 39 +++++++++++
 ...t.java => InlineStyleServiceImplTest.java} | 26 +++----
 18 files changed, 344 insertions(+), 77 deletions(-)
 create mode 100644 bundles/core/src/main/java/com/adobe/dx/img/ImageModel.java
 rename bundles/core/src/main/java/com/adobe/dx/responsive/internal/{ResponsiveProperties.java => ResponsivePropertiesImpl.java} (81%)
 rename bundles/core/src/main/java/com/adobe/dx/style/{StyleService.java => InlineStyleService.java} (91%)
 create mode 100644 bundles/core/src/main/java/com/adobe/dx/style/internal/Background.java
 create mode 100644 bundles/core/src/main/java/com/adobe/dx/style/internal/Color.java
 rename bundles/core/src/main/java/com/adobe/dx/style/internal/{StyleServiceImpl.java => InlineStyleServiceImpl.java} (96%)
 rename bundles/core/src/test/java/com/adobe/dx/responsive/internal/{ResponsivePropertiesTest.java => ResponsivePropertiesImplTest.java} (84%)
 create mode 100644 bundles/core/src/test/java/com/adobe/dx/style/internal/BackgroundTest.java
 create mode 100644 bundles/core/src/test/java/com/adobe/dx/style/internal/ColorTest.java
 rename bundles/core/src/test/java/com/adobe/dx/style/internal/{StyleServiceImplTest.java => InlineStyleServiceImplTest.java} (85%)

diff --git a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/.content.xml b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/.content.xml
index ae5c6d20..3735389e 100644
--- a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/.content.xml
+++ b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/.content.xml
@@ -3,4 +3,4 @@
           jcr:primaryType="cq:Component"
           componentGroup="DX"
           jcr:title="Flex"
-          styleWorkers="[shadow,border]"/>
\ No newline at end of file
+          styleWorkers="[background,color,shadow,border]"/>
\ No newline at end of file
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/color.html b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/color.html
index b6253b59..633dfd47 100644
--- a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/color.html
+++ b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/color.html
@@ -13,20 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-<template data-sly-template.background="${ @ id}">
-    <sly data-sly-repeat.bp="${breakpoints}">
-        <sly data-sly-test="${resprops.backgroundColor[bp.key] || resprops.gradient[bp.key]}">
-            <sly data-sly-test="${bp.mediaQuery}">${bp.mediaQuery}{</sly>
-            ${'#{0}' @ format=id, context='styleString'} {
-            <sly data-sly-test="${resprops.backgroundColor[bp.key]}">
-                ${'background-color: {0}; ' @ format=resprops.backgroundColor[bp.key], context='styleString'}
-            </sly>
-            <sly data-sly-test="${resprops.gradient[bp.key]}">
-                ${'background-image: {0};' @ format=[resprops.gradient[bp.key]], context='styleString'}
-            </sly>}<sly data-sly-test="${bp.mediaQuery}">}</sly>
-        </sly>
-    </sly>
-</template>
 <template data-sly-template.foreground="${ @ id}">
     <sly data-sly-repeat.bp="${breakpoints}"
          data-sly-test="${resprops.foregroundColor[bp.key]}">
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/flex.html b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/flex.html
index dce0cd1f..43dd629b 100644
--- a/apps/structure/app/jcr_root/apps/dx/structure/components/flex/flex.html
+++ b/apps/structure/app/jcr_root/apps/dx/structure/components/flex/flex.html
@@ -35,19 +35,6 @@
     <sly data-sly-test="${bp.mediaQuery}">}</sly>
     </sly>
 </sly>
-<sly data-sly-use.colorTpl="color.html" data-sly-call="${colorTpl.background @ id = model.id}"></sly>
-<!--/* Background Image (Must be set after Background Colors to override background-image) */-->
-<sly data-sly-test="${imageModel.src}" data-sly-use.backgroundTpl="background.html"
-data-sly-call="${backgroundTpl.styles @ colorModel = colorModel, imageModel = imageModel, idGeneratorModel = idGeneratorModel}"></sly>
-<sly data-sly-test="${colorModel.foreground}"
-data-sly-use.colorTpl="${rtPro.componentPath}/color.html"
-data-sly-call="${colorTpl.foreground @ colorModel = colorModel, imageModel = imageModel, idGeneratorModel = idGeneratorModel}"></sly>
-<!--/* Border */-->
-<sly data-sly-test="${model.border || model.borderRadius}"
-data-sly-use.borderTpl="${rtPro.componentPath}/border.html"
-data-sly-call="${borderTpl.border @ idGeneratorModel = idGeneratorModel,  position = model}">
-</sly>
-<!--/* Shadow & Border */-->
 <sly data-sly-test="${model.style}">${model.style @ context='styleString'}</sly>
 </style>
 <div id="${model.id}" class="dx-flex">
diff --git a/apps/structure/core/src/main/java/com/adobe/dx/structure/flex/FlexModel.java b/apps/structure/core/src/main/java/com/adobe/dx/structure/flex/FlexModel.java
index d60ae226..bfcb4741 100644
--- a/apps/structure/core/src/main/java/com/adobe/dx/structure/flex/FlexModel.java
+++ b/apps/structure/core/src/main/java/com/adobe/dx/structure/flex/FlexModel.java
@@ -17,7 +17,7 @@
 
 import com.adobe.dx.domtagging.IDTagger;
 import com.adobe.dx.responsive.Breakpoint;
-import com.adobe.dx.style.StyleService;
+import com.adobe.dx.style.InlineStyleService;
 import com.day.cq.wcm.api.policies.ContentPolicy;
 import com.day.cq.wcm.api.policies.ContentPolicyManager;
 
@@ -51,7 +51,7 @@ public class FlexModel {
     IDTagger idTagger;
 
     @OSGiService
-    StyleService styleService;
+    InlineStyleService styleService;
 
     @ScriptVariable
     Breakpoint[] breakpoints;
@@ -72,7 +72,7 @@ void init() {
             }
         }
         if (styleService != null) {
-            style = styleService.getLocalStyle(getId(), request);
+            style = styleService.getInlineStyle(getId(), request);
         }
     }
 
diff --git a/bundles/core/src/main/java/com/adobe/dx/bindings/internal/DxBindingsValueProvider.java b/bundles/core/src/main/java/com/adobe/dx/bindings/internal/DxBindingsValueProvider.java
index 76c05a03..abea1a72 100644
--- a/bundles/core/src/main/java/com/adobe/dx/bindings/internal/DxBindingsValueProvider.java
+++ b/bundles/core/src/main/java/com/adobe/dx/bindings/internal/DxBindingsValueProvider.java
@@ -18,7 +18,7 @@
 import static com.day.cq.wcm.scripting.WCMBindingsConstants.NAME_CURRENT_CONTENT_POLICY;
 
 import com.adobe.dx.responsive.ResponsiveConfiguration;
-import com.adobe.dx.responsive.internal.ResponsiveProperties;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImpl;
 import com.day.cq.wcm.api.policies.ContentPolicy;
 
 import javax.script.Bindings;
@@ -33,7 +33,6 @@
 import org.osgi.framework.Constants;
 import org.osgi.service.component.annotations.Component;
 import org.osgi.service.component.annotations.ConfigurationPolicy;
-import org.osgi.service.component.annotations.Reference;
 
 @Component(service = BindingsValuesProvider.class,
     property = {
@@ -69,7 +68,7 @@ public void addBindings(@NotNull Bindings bindings) {
                     .adaptTo(ConfigurationBuilder.class)
                     .as(ResponsiveConfiguration.class);
                 bindings.put(BP_KEY, configuration.breakpoints());
-                bindings.put(RESP_PROPS_KEY, new ResponsiveProperties(configuration, dxPolicy));
+                bindings.put(RESP_PROPS_KEY, new ResponsivePropertiesImpl(configuration, dxPolicy));
             }
         }
     }
diff --git a/bundles/core/src/main/java/com/adobe/dx/img/ImageModel.java b/bundles/core/src/main/java/com/adobe/dx/img/ImageModel.java
new file mode 100644
index 00000000..1797af1c
--- /dev/null
+++ b/bundles/core/src/main/java/com/adobe/dx/img/ImageModel.java
@@ -0,0 +1,34 @@
+/*******************************************************************************
+ *
+ * ADOBE CONFIDENTIAL
+ * __________________
+ *
+ *  Copyright 2019 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ ******************************************************************************/
+
+package com.adobe.dx.img;
+
+import java.util.Map;
+
+import org.apache.sling.api.SlingHttpServletRequest;
+import org.apache.sling.models.annotations.Model;
+import org.apache.sling.models.annotations.injectorspecific.ScriptVariable;
+
+@Model(adaptables = SlingHttpServletRequest.class)
+public class ImageModel {
+
+    @ScriptVariable
+    Map<String, Object> resprops;
+
+
+}
diff --git a/bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsiveProperties.java b/bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImpl.java
similarity index 81%
rename from bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsiveProperties.java
rename to bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImpl.java
index bd8bb1af..730c2b67 100644
--- a/bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsiveProperties.java
+++ b/bundles/core/src/main/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImpl.java
@@ -33,12 +33,12 @@
  * simply check for get operation the required property with and ordered list of
  * suffix. Allowing several properties
  */
-public class ResponsiveProperties implements Map<String, Object> {
+public class ResponsivePropertiesImpl implements Map<String, LinkedHashMap<String, Object>> {
 
     private final Breakpoint[] breakpoints;
     private ValueMap properties;
 
-    public ResponsiveProperties(final ResponsiveConfiguration configuration, ValueMap properties) {
+    public ResponsivePropertiesImpl(final ResponsiveConfiguration configuration, ValueMap properties) {
         breakpoints = configuration.breakpoints();
         this.properties = properties;
     }
@@ -48,10 +48,10 @@ private String computeResponsiveResourceName(String name, Breakpoint breakpoint)
     }
 
     @Override
-    public Object get(Object key) {
+    public LinkedHashMap<String, Object> get(Object key) {
         if (key != null) {
             boolean empty = true;
-            LinkedHashMap<String,String> breakpointValues = new LinkedHashMap<>();
+            LinkedHashMap<String, Object> breakpointValues = new LinkedHashMap<>();
             for (Breakpoint breakpoint : breakpoints) {
                 String respKey = computeResponsiveResourceName(key.toString(), breakpoint);
                 String value = properties.get(respKey, String.class);
@@ -87,17 +87,17 @@ public boolean containsValue(Object value) {
 
     @Nullable
     @Override
-    public Object put(String key, Object value) {
+    public LinkedHashMap<String, Object> put(String key, LinkedHashMap<String, Object> value) {
         throw new UnsupportedOperationException();
     }
 
     @Override
-    public Object remove(Object key) {
+    public LinkedHashMap<String, Object> remove(Object key) {
         throw new UnsupportedOperationException();
     }
 
     @Override
-    public void putAll(@NotNull Map<? extends String, ?> m) {
+    public void putAll(@NotNull Map<? extends String, ? extends LinkedHashMap<String, Object>> m) {
         throw new UnsupportedOperationException();
     }
 
@@ -114,13 +114,13 @@ public Set<String> keySet() {
 
     @NotNull
     @Override
-    public Collection<Object> values() {
+    public Collection<LinkedHashMap<String, Object>> values() {
         throw new UnsupportedOperationException();
     }
 
     @NotNull
     @Override
-    public Set<Entry<String, Object>> entrySet() {
+    public Set<Entry<String, LinkedHashMap<String, Object>>> entrySet() {
         throw new UnsupportedOperationException();
     }
 }
diff --git a/bundles/core/src/main/java/com/adobe/dx/style/StyleService.java b/bundles/core/src/main/java/com/adobe/dx/style/InlineStyleService.java
similarity index 91%
rename from bundles/core/src/main/java/com/adobe/dx/style/StyleService.java
rename to bundles/core/src/main/java/com/adobe/dx/style/InlineStyleService.java
index 42c35e1a..82ac8080 100644
--- a/bundles/core/src/main/java/com/adobe/dx/style/StyleService.java
+++ b/bundles/core/src/main/java/com/adobe/dx/style/InlineStyleService.java
@@ -18,7 +18,7 @@
 import org.apache.sling.api.SlingHttpServletRequest;
 import org.jetbrains.annotations.Nullable;
 
-public interface StyleService {
+public interface InlineStyleService {
 
     /**
      * Computes a list of CSS declarations relatives of the given request. If an id is provided,
@@ -28,5 +28,5 @@ public interface StyleService {
      * @param request current request
      * @return declaration set, or local rule
      */
-    String getLocalStyle(@Nullable String id, SlingHttpServletRequest request);
+    String getInlineStyle(@Nullable String id, SlingHttpServletRequest request);
 }
diff --git a/bundles/core/src/main/java/com/adobe/dx/style/internal/Background.java b/bundles/core/src/main/java/com/adobe/dx/style/internal/Background.java
new file mode 100644
index 00000000..9e3cba4c
--- /dev/null
+++ b/bundles/core/src/main/java/com/adobe/dx/style/internal/Background.java
@@ -0,0 +1,70 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+package com.adobe.dx.style.internal;
+
+import static com.adobe.dx.utils.RequestUtil.getFromRespProps;
+
+import com.adobe.dx.responsive.Breakpoint;
+import com.adobe.dx.style.StyleWorker;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import org.apache.commons.lang.StringUtils;
+import org.apache.sling.api.SlingHttpServletRequest;
+import org.jetbrains.annotations.Nullable;
+import org.osgi.service.component.annotations.Component;
+import org.osgi.service.component.annotations.ConfigurationPolicy;
+
+@Component(configurationPolicy = ConfigurationPolicy.REQUIRE)
+public class Background implements StyleWorker {
+    private static final String KEY = "background";
+    private static final String PN_BACKGROUNDCOLOR = "backgroundColor";
+    private static final String PN_GRADIENT = "gradient";
+    private static final String PN_IMAGE = "fileReference";
+    private static final String PN_FOCUSX = "focusX";
+    private static final String PN_FOCUSY = "focusY";
+    private static final String COLOR_FORMAT = "background-color: %s";
+
+    @Override
+    public String getKey() {
+        return KEY;
+    }
+
+    @Override
+    public @Nullable String getDeclaration(@Nullable Breakpoint breakpoint, SlingHttpServletRequest request) {
+        String bgColor = getFromRespProps(request, breakpoint, PN_BACKGROUNDCOLOR, String.class);
+        String gradient = getFromRespProps(request, breakpoint, PN_GRADIENT, String.class);
+        String backgroundImage = getFromRespProps(request, breakpoint, PN_IMAGE, String.class);
+        if (bgColor != null || gradient != null || backgroundImage != null) {
+            List<String> declarations = new ArrayList<>();
+            if (StringUtils.isNotBlank(bgColor)) {
+                declarations.add(COLOR_FORMAT.format(bgColor));
+            }
+            if (StringUtils.isNotBlank(gradient)) {
+
+            }
+
+        }
+        return null;
+    }
+
+    @Override
+    public @Nullable String getRule(@Nullable Breakpoint breakpoint, @Nullable String id,
+                                    SlingHttpServletRequest request) {
+        return null;
+    }
+}
diff --git a/bundles/core/src/main/java/com/adobe/dx/style/internal/Color.java b/bundles/core/src/main/java/com/adobe/dx/style/internal/Color.java
new file mode 100644
index 00000000..faf01bf4
--- /dev/null
+++ b/bundles/core/src/main/java/com/adobe/dx/style/internal/Color.java
@@ -0,0 +1,56 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+package com.adobe.dx.style.internal;
+
+import static com.adobe.dx.utils.RequestUtil.getFromRespProps;
+
+import com.adobe.dx.responsive.Breakpoint;
+import com.adobe.dx.style.StyleWorker;
+
+import org.apache.commons.lang.StringUtils;
+import org.apache.sling.api.SlingHttpServletRequest;
+import org.jetbrains.annotations.Nullable;
+import org.osgi.service.component.annotations.Component;
+import org.osgi.service.component.annotations.ConfigurationPolicy;
+
+@Component(configurationPolicy = ConfigurationPolicy.REQUIRE)
+public class Color implements StyleWorker {
+    private final static String KEY = "color";
+
+    private final static String PN_COLOR = "foregroundColor";
+    private final static String FORMAT = "color: %s";
+
+    @Override
+    public String getKey() {
+        return KEY;
+    }
+
+    @Override
+    public @Nullable String getDeclaration(@Nullable Breakpoint breakpoint, SlingHttpServletRequest request) {
+        String color = getFromRespProps(request, breakpoint, PN_COLOR, String.class);
+        if (StringUtils.isNotBlank(color)) {
+            return String.format(FORMAT, color);
+        }
+        return null;
+    }
+
+    @Override
+    public @Nullable String getRule(@Nullable Breakpoint breakpoint, @Nullable String id,
+                                    SlingHttpServletRequest request) {
+        return null;
+    }
+}
diff --git a/bundles/core/src/main/java/com/adobe/dx/style/internal/StyleServiceImpl.java b/bundles/core/src/main/java/com/adobe/dx/style/internal/InlineStyleServiceImpl.java
similarity index 96%
rename from bundles/core/src/main/java/com/adobe/dx/style/internal/StyleServiceImpl.java
rename to bundles/core/src/main/java/com/adobe/dx/style/internal/InlineStyleServiceImpl.java
index 46595165..1a875075 100644
--- a/bundles/core/src/main/java/com/adobe/dx/style/internal/StyleServiceImpl.java
+++ b/bundles/core/src/main/java/com/adobe/dx/style/internal/InlineStyleServiceImpl.java
@@ -22,7 +22,7 @@
 
 import com.adobe.dx.responsive.Breakpoint;
 import com.adobe.dx.style.StyleWorker;
-import com.adobe.dx.style.StyleService;
+import com.adobe.dx.style.InlineStyleService;
 import com.adobe.dx.utils.RequestUtil;
 
 import java.util.ArrayList;
@@ -45,7 +45,7 @@
 import org.slf4j.LoggerFactory;
 
 @Component(configurationPolicy = ConfigurationPolicy.REQUIRE)
-public class StyleServiceImpl implements StyleService {
+public class InlineStyleServiceImpl implements InlineStyleService {
     private final Logger logger = LoggerFactory.getLogger(this.getClass());
     private static final String FORMAT_ID = "#%s {%s}";
     private static final String FORMAT_BP = "\n%s {\n%s\n}";
@@ -84,7 +84,7 @@ String getStylePerBreakpoint(String id, Breakpoint breakpoint, String[] keys, Sl
     }
 
     @Override
-    public String getLocalStyle(String id, SlingHttpServletRequest request) {
+    public String getInlineStyle(String id, SlingHttpServletRequest request) {
         Resource resource = request.getResource();
         String[] keys = getWorkerKeys(resource);
         if (keys.length > 0) {
diff --git a/bundles/core/src/main/java/com/adobe/dx/utils/RequestUtil.java b/bundles/core/src/main/java/com/adobe/dx/utils/RequestUtil.java
index 8e7e5564..97847b0d 100644
--- a/bundles/core/src/main/java/com/adobe/dx/utils/RequestUtil.java
+++ b/bundles/core/src/main/java/com/adobe/dx/utils/RequestUtil.java
@@ -18,6 +18,7 @@
 import com.adobe.dx.bindings.internal.DxBindingsValueProvider;
 import com.adobe.dx.responsive.Breakpoint;
 
+import java.util.LinkedHashMap;
 import java.util.Map;
 
 import org.apache.sling.api.SlingHttpServletRequest;
@@ -59,7 +60,27 @@ public static final Breakpoint[] getBreakpoints(SlingHttpServletRequest request)
      * @param request current request
      * @return current set of responsive properties
      */
-    public static final Map<String, Object> getResponsiveProperties(SlingHttpServletRequest request) {
-        return (Map<String, Object>) getBindings(request).get(DxBindingsValueProvider.RESP_PROPS_KEY);
+    public static final Map<String, LinkedHashMap<String, Object>> getResponsiveProperties(SlingHttpServletRequest request) {
+        return (Map<String, LinkedHashMap<String, Object>>)getBindings(request).get(DxBindingsValueProvider.RESP_PROPS_KEY);
+    }
+
+    /**
+     * Get value or null of a given property for a given breakpoint
+     * @param request current request
+     * @param breakpoint current breakpoint
+     * @param propertyName required property name
+     * @param requiredClass required class for return value
+     * @param <T> type of the value required
+     * @return value or default value
+     */
+    public static final <T> T getFromRespProps(SlingHttpServletRequest request, Breakpoint breakpoint, String propertyName, Class<T> requiredClass) {
+        Map<String, LinkedHashMap<String, Object>> resprops = RequestUtil.getResponsiveProperties(request);
+        if (resprops != null) {
+            LinkedHashMap<String, Object> values = resprops.get(propertyName);
+            if (values != null && values.get(breakpoint.key()) != null) {
+                return (T) values.get(breakpoint.key());
+            }
+        }
+        return null;
     }
 }
diff --git a/bundles/core/src/test/java/com/adobe/dx/bindings/internal/DxBindingsValueProviderTest.java b/bundles/core/src/test/java/com/adobe/dx/bindings/internal/DxBindingsValueProviderTest.java
index 78fbd68d..27beac3d 100644
--- a/bundles/core/src/test/java/com/adobe/dx/bindings/internal/DxBindingsValueProviderTest.java
+++ b/bundles/core/src/test/java/com/adobe/dx/bindings/internal/DxBindingsValueProviderTest.java
@@ -20,7 +20,7 @@
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.when;
 
-import com.adobe.dx.responsive.internal.ResponsivePropertiesTest;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImplTest;
 import com.adobe.dx.testing.AbstractTest;
 import com.day.cq.wcm.api.policies.ContentPolicy;
 
@@ -36,7 +36,7 @@ class DxBindingsValueProviderTest extends AbstractTest {
 
     @BeforeEach
     void setup() {
-        ResponsivePropertiesTest.initResponsiveConfiguration(context);
+        ResponsivePropertiesImplTest.initResponsiveConfiguration(context);
     }
     
     void mockAddContentPolicy(Bindings bindings) {
diff --git a/bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesTest.java b/bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImplTest.java
similarity index 84%
rename from bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesTest.java
rename to bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImplTest.java
index a09acd89..41b26688 100644
--- a/bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesTest.java
+++ b/bundles/core/src/test/java/com/adobe/dx/responsive/internal/ResponsivePropertiesImplTest.java
@@ -36,7 +36,7 @@
 
 import io.wcm.testing.mock.aem.junit5.AemContext;
 
-public class ResponsivePropertiesTest extends AbstractTest {
+public class ResponsivePropertiesImplTest extends AbstractTest {
 
     ResponsiveConfiguration configuration;
 
@@ -48,7 +48,10 @@ public static ResponsiveConfiguration initResponsiveConfiguration(AemContext con
             .resource("3", "propertySuffix", "Desktop", "key", "desktop", "mediaQuery", "@media screen and (min-width: 1200px)");
         MockContextAwareConfig.registerAnnotationClasses(context, ResponsiveConfiguration.class);
         MockContextAwareConfig.registerAnnotationClasses(context, Breakpoint.class);
-        context.create().resource(CONTENT_ROOT, "sling:configRef", CONF_ROOT);
+        if (context.resourceResolver().getResource(CONTENT_ROOT) == null) {
+            context.create().resource(CONTENT_ROOT);
+        }
+        context.build().resource(CONTENT_ROOT, "sling:configRef", CONF_ROOT);
         ResponsiveConfiguration configuration =  context.resourceResolver()
             .getResource(CONTENT_ROOT)
             .adaptTo(ConfigurationBuilder.class)
@@ -62,15 +65,15 @@ void setup() {
         configuration = initResponsiveConfiguration(context);
     }
 
-    LinkedHashMap<String,String> getProperty(final ResponsiveConfiguration rConfig, String key, Object...entries) {
+    LinkedHashMap<String, Object> getProperty(final ResponsiveConfiguration rConfig, String key, Object...entries) {
         String path = "/content/" + StringUtils.join(Arrays.asList(entries), "/");
         context.build().resource(path, entries).commit();
         Resource resource = context.resourceResolver().getResource(path);
-        ResponsiveProperties responsiveProperties = new ResponsiveProperties(rConfig, resource.getValueMap());
-        return (LinkedHashMap<String,String>)responsiveProperties.get(key);
+        ResponsivePropertiesImpl responsiveProperties = new ResponsivePropertiesImpl(rConfig, resource.getValueMap());
+        return responsiveProperties.get(key);
     }
 
-    void assertLinkedHashMapEqual(String message, LinkedHashMap<String,String> result, String... properties) {
+    void assertLinkedHashMapEqual(String message, LinkedHashMap<String, Object> result, String... properties) {
         LinkedHashMap<String,String> expected = new LinkedHashMap<>();
         for (int i = 0; i < properties.length; i += 2) {
             expected.put(properties[i], properties[i+1]);
@@ -96,16 +99,16 @@ void get() {
             "no value should be null");
         assertNull(getProperty(configuration, "height", "blah", 34,"foo", 12,"heightDesktop", ""),
             "blank value should be null");
-        assertNull(new ResponsiveProperties(configuration, ValueMap.EMPTY).get(null));
+        assertNull(new ResponsivePropertiesImpl(configuration, ValueMap.EMPTY).get(null));
     }
 
     @Test
     void unsupported() {
-        ResponsiveProperties props = new ResponsiveProperties(configuration, ValueMap.EMPTY);
+        ResponsivePropertiesImpl props = new ResponsivePropertiesImpl(configuration, ValueMap.EMPTY);
         final Collection<Callable> unsupportedOperations = Arrays.asList(
             () -> {props.clear(); return 0;},
-            () -> {props.putAll(ValueMap.EMPTY); return 0;},
-            () -> props.put("foo", "bar"),
+            () -> {props.putAll(new LinkedHashMap<>()); return 0;},
+            () -> props.put("foo", new LinkedHashMap<>()),
             () -> props.containsKey("foo"),
             () -> props.containsValue("bar"),
             () -> props.size(),
diff --git a/bundles/core/src/test/java/com/adobe/dx/style/internal/AbstractStyleWorkerTest.java b/bundles/core/src/test/java/com/adobe/dx/style/internal/AbstractStyleWorkerTest.java
index 3a6d2256..c39c14d1 100644
--- a/bundles/core/src/test/java/com/adobe/dx/style/internal/AbstractStyleWorkerTest.java
+++ b/bundles/core/src/test/java/com/adobe/dx/style/internal/AbstractStyleWorkerTest.java
@@ -20,9 +20,13 @@
 
 import com.adobe.dx.bindings.internal.DxBindingsValueProvider;
 import com.adobe.dx.responsive.Breakpoint;
+import com.adobe.dx.responsive.ResponsiveConfiguration;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImpl;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImplTest;
 import com.adobe.dx.style.StyleWorker;
 import com.adobe.dx.testing.AbstractTest;
 
+import org.apache.commons.lang.StringUtils;
 import org.apache.sling.api.scripting.SlingBindings;
 
 public abstract class AbstractStyleWorkerTest extends AbstractTest {
@@ -33,10 +37,22 @@ String getDeclaration() {
         return getDeclaration(null);
     }
 
-    String getDeclaration(Breakpoint breakpoint) {
-
+    String getDeclaration(String breakpointKey) {
         SlingBindings bindings = (SlingBindings)context.request().getAttribute(SlingBindings.class.getName());
         bindings.put(DxBindingsValueProvider.POLICY_KEY, getVM(CONTENT_ROOT));
+        Breakpoint breakpoint = null;
+        if (StringUtils.isNotBlank(breakpointKey)) {
+            ResponsiveConfiguration configuration = ResponsivePropertiesImplTest.initResponsiveConfiguration(context);
+            ResponsivePropertiesImpl responsiveProperties = new ResponsivePropertiesImpl(configuration, getVM(CONTENT_ROOT));
+            bindings.put(DxBindingsValueProvider.RESP_PROPS_KEY, responsiveProperties);
+            bindings.put(DxBindingsValueProvider.BP_KEY, configuration.breakpoints());
+            for (Breakpoint candidate : configuration.breakpoints()) {
+                if (candidate.key().equals(breakpointKey)) {
+                    breakpoint = candidate;
+                    break;
+                }
+            }
+        }
         return getWorker().getDeclaration(breakpoint, context.request());
     }
 }
diff --git a/bundles/core/src/test/java/com/adobe/dx/style/internal/BackgroundTest.java b/bundles/core/src/test/java/com/adobe/dx/style/internal/BackgroundTest.java
new file mode 100644
index 00000000..12c56787
--- /dev/null
+++ b/bundles/core/src/test/java/com/adobe/dx/style/internal/BackgroundTest.java
@@ -0,0 +1,56 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+package com.adobe.dx.style.internal;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+import com.adobe.dx.style.StyleWorker;
+
+import org.junit.jupiter.api.Test;
+
+class BackgroundTest extends AbstractStyleWorkerTest{
+
+    @Override
+    StyleWorker getWorker() {
+        return new Background();
+    }
+
+    @Test
+    void getBackgroundImage() {
+        context.build().resource(CONTENT_ROOT,
+            "fileReferenceMobile", "/content/dam/mobile.jpg",
+            "fileReferenceTablet", "/content/dam/tablet.jpg",
+            "fileReferenceDesktop", "/content/dam/desktop.jpg",
+            "focusXMobile", 30,
+            "focusYMobile", 30);
+        assertEquals("background-image:url(\\2f content\\2f dam\\2f mobile.jpg); background-size: cover; background-position: 30% 30%;  ", getDeclaration("mobile"));
+        assertEquals("background-image:url(\\2f content\\2f dam\\2f desktop.jpg); background-size: cover;  ", getDeclaration("desktop"));
+    }
+
+    @Test
+    void getBackgroundColor() {
+        context.build().resource(CONTENT_ROOT,
+            "backgroundColorDesktop", " #FFFFFF");
+        assertEquals("background-color : #FFFFFF", getDeclaration("desktop"));
+    }
+
+    @Test
+    void getBackgroundGradient() {
+        context.build().resource(CONTENT_ROOT,
+            "backgroundColorDesktop", " #FFFFFF");
+        assertEquals("background-color : #FFFFFF", getDeclaration("desktop"));
+    }
+}
\ No newline at end of file
diff --git a/bundles/core/src/test/java/com/adobe/dx/style/internal/ColorTest.java b/bundles/core/src/test/java/com/adobe/dx/style/internal/ColorTest.java
new file mode 100644
index 00000000..7bf147f7
--- /dev/null
+++ b/bundles/core/src/test/java/com/adobe/dx/style/internal/ColorTest.java
@@ -0,0 +1,39 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2020 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+package com.adobe.dx.style.internal;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+
+import com.adobe.dx.style.StyleWorker;
+
+import org.junit.jupiter.api.Test;
+
+public class ColorTest extends AbstractStyleWorkerTest {
+    @Override
+    StyleWorker getWorker() {
+        return new Color();
+    }
+
+    @Test
+    void getColor() {
+        context.build().resource(CONTENT_ROOT,
+            "foregroundColorDesktop", "#FFFFFF");
+        assertEquals("color: #FFFFFF", getDeclaration("desktop"));
+        assertNull(getDeclaration("mobile"));
+    }
+
+}
diff --git a/bundles/core/src/test/java/com/adobe/dx/style/internal/StyleServiceImplTest.java b/bundles/core/src/test/java/com/adobe/dx/style/internal/InlineStyleServiceImplTest.java
similarity index 85%
rename from bundles/core/src/test/java/com/adobe/dx/style/internal/StyleServiceImplTest.java
rename to bundles/core/src/test/java/com/adobe/dx/style/internal/InlineStyleServiceImplTest.java
index 4c20ce1e..74867b3f 100644
--- a/bundles/core/src/test/java/com/adobe/dx/style/internal/StyleServiceImplTest.java
+++ b/bundles/core/src/test/java/com/adobe/dx/style/internal/InlineStyleServiceImplTest.java
@@ -20,8 +20,8 @@
 import com.adobe.dx.bindings.internal.DxBindingsValueProvider;
 import com.adobe.dx.responsive.Breakpoint;
 import com.adobe.dx.responsive.ResponsiveConfiguration;
-import com.adobe.dx.responsive.internal.ResponsiveProperties;
-import com.adobe.dx.responsive.internal.ResponsivePropertiesTest;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImpl;
+import com.adobe.dx.responsive.internal.ResponsivePropertiesImplTest;
 import com.adobe.dx.style.StyleWorker;
 import com.adobe.dx.testing.AbstractTest;
 import com.adobe.dx.utils.RequestUtil;
@@ -35,7 +35,7 @@
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
 
-class StyleServiceImplTest extends AbstractTest {
+class InlineStyleServiceImplTest extends AbstractTest {
 
     private static String getFromRequest(String cssKey, String bpKey, String prop, SlingHttpServletRequest request) {
         String value = null;
@@ -97,11 +97,11 @@ public String getKey() {
             return null;
         }
     };
-    StyleServiceImpl service;
+    InlineStyleServiceImpl service;
 
     @BeforeEach
     void setup() {
-        ResponsiveConfiguration conf = ResponsivePropertiesTest.initResponsiveConfiguration(context);
+        ResponsiveConfiguration conf = ResponsivePropertiesImplTest.initResponsiveConfiguration(context);
         String someComp = CONTENT_ROOT + "/comp";
         final String[] array = new String[] {"worker1", "worker2"};
         context.build().resource("/apps/foo/bar", "styleWorkers", array);
@@ -115,13 +115,13 @@ void setup() {
         RequestUtil.getBindings(context.request()).put(DxBindingsValueProvider.BP_KEY,
             conf.breakpoints());
         RequestUtil.getBindings(context.request()).put(DxBindingsValueProvider.RESP_PROPS_KEY,
-            new ResponsiveProperties(conf, context.currentResource().getValueMap()));
-        service = new StyleServiceImpl();
+            new ResponsivePropertiesImpl(conf, context.currentResource().getValueMap()));
+        service = new InlineStyleServiceImpl();
     }
 
     @Test
     void getLocalStyle() {
-        assertTrue(StringUtils.isBlank(service.getLocalStyle(null, context.request())));
+        assertTrue(StringUtils.isBlank(service.getInlineStyle(null, context.request())));
         service.bindWorker(worker1);
         service.bindWorker(worker2);
         assertEquals("color: blue;font-size: 13px\n"
@@ -130,19 +130,19 @@ void getLocalStyle() {
             + "}\n"
             + "@media screen and (min-width: 1200px) {\n"
             + "min-width: 90%\n"
-            + "}", service.getLocalStyle(null, context.request()));
+            + "}", service.getInlineStyle(null, context.request()));
         assertEquals("#this-is-my-block {color: blue;font-size: 13px}\n"
             + "@media screen and (min-width: 600px) {\n"
             + "#this-is-my-block {min-height: 200px}\n"
             + "}\n"
             + "@media screen and (min-width: 1200px) {\n"
             + "#this-is-my-block {min-width: 90%}\n"
-            + "}", service.getLocalStyle("this-is-my-block", context.request()));
+            + "}", service.getInlineStyle("this-is-my-block", context.request()));
         service.unbindWorker(worker2);
         assertEquals("color: blue\n"
             + "@media screen and (min-width: 600px) {\n"
             + "min-height: 200px\n"
-            + "}", service.getLocalStyle(null, context.request()));
+            + "}", service.getInlineStyle(null, context.request()));
     }
 
     @Test
@@ -150,7 +150,7 @@ void getWorkerKeysFullPath() {
         final String[] array = new String[] {"workers1", "workers2"};
         context.build().resource("/apps/foo/bar", "styleWorkers", array);
         context.build().resource(CONTENT_ROOT, "sling:resourceType", "foo/bar");
-        assertArrayEquals(array, new StyleServiceImpl().getWorkerKeys(context.currentResource(CONTENT_ROOT)));
+        assertArrayEquals(array, new InlineStyleServiceImpl().getWorkerKeys(context.currentResource(CONTENT_ROOT)));
     }
 
 
@@ -158,6 +158,6 @@ void getWorkerKeysFullPath() {
     void getWorkerKeysNothing() {
         context.build().resource("/apps/check/this", "blah", "blah");
         context.build().resource(CONTENT_ROOT, "sling:resourceType", "check/this");
-        assertEquals(0, new StyleServiceImpl().getWorkerKeys(context.currentResource(CONTENT_ROOT)).length);
+        assertEquals(0, new InlineStyleServiceImpl().getWorkerKeys(context.currentResource(CONTENT_ROOT)).length);
     }
 }
\ No newline at end of file