From: Pekka Hyvönen <pekka@vaadin.com>
Date: Thu, 28 Jun 2012 13:42:33 +0000 (+0300)
Subject: Fixed connector so it no longer overwrites all style attributes (#8664)
X-Git-Tag: 7.0.0.alpha3~39
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e9b1233e49b66c97f5237538e8299ad75aa9c88b;p=vaadin-framework.git

Fixed connector so it no longer overwrites all style attributes (#8664)
---

diff --git a/src/com/vaadin/terminal/gwt/client/ui/AbstractComponentConnector.java b/src/com/vaadin/terminal/gwt/client/ui/AbstractComponentConnector.java
index 2f55cc4d16..6105c545f6 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/AbstractComponentConnector.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/AbstractComponentConnector.java
@@ -3,6 +3,8 @@
  */
 package com.vaadin.terminal.gwt.client.ui;
 
+import java.util.ArrayList;
+import java.util.List;
 import java.util.Set;
 
 import com.google.gwt.dom.client.Element;
@@ -22,6 +24,7 @@ import com.vaadin.terminal.gwt.client.UIDL;
 import com.vaadin.terminal.gwt.client.Util;
 import com.vaadin.terminal.gwt.client.VConsole;
 import com.vaadin.terminal.gwt.client.communication.StateChangeEvent;
+import com.vaadin.terminal.gwt.client.ui.datefield.PopupDateFieldConnector;
 import com.vaadin.terminal.gwt.client.ui.root.RootConnector;
 
 public abstract class AbstractComponentConnector extends AbstractConnector
@@ -32,6 +35,12 @@ public abstract class AbstractComponentConnector extends AbstractConnector
     private String lastKnownWidth = "";
     private String lastKnownHeight = "";
 
+    /**
+     * The style names from getState().getStyles() which are currently applied
+     * to the widget.
+     */
+    protected List<String> styleNames = new ArrayList<String>();
+
     /**
      * Default constructor
      */
@@ -41,7 +50,11 @@ public abstract class AbstractComponentConnector extends AbstractConnector
     @Override
     protected void init() {
         super.init();
+
         getConnection().getVTooltip().connectHandlersToWidget(getWidget());
+
+        // Set v-connector style names for the widget
+        getWidget().setStyleName("v-connector", true);
     }
 
     /**
@@ -103,8 +116,7 @@ public abstract class AbstractComponentConnector extends AbstractConnector
         super.onStateChanged(stateChangeEvent);
 
         // Style names
-        String styleName = getStyleNames(getWidget().getStylePrimaryName());
-        getWidget().setStyleName(styleName);
+        updateWidgetStyleNames();
 
         // Set captions
         if (delegateCaptionHandling()) {
@@ -127,12 +139,14 @@ public abstract class AbstractComponentConnector extends AbstractConnector
     }
 
     public void setWidgetEnabled(boolean widgetEnabled) {
+        // add or remove v-disabled style name from the widget
+        setWidgetStyleName(ApplicationConnection.DISABLED_CLASSNAME,
+                !widgetEnabled);
+
         if (getWidget() instanceof HasEnabled) {
             // set widget specific enabled state
             ((HasEnabled) getWidget()).setEnabled(widgetEnabled);
-            // add or remove v-disabled style name from the widget
-            getWidget().setStyleName(ApplicationConnection.DISABLED_CLASSNAME,
-                    !widgetEnabled);
+
             // make sure the caption has or has not v-disabled style
             if (delegateCaptionHandling()) {
                 ServerConnector parent = getParent();
@@ -210,58 +224,112 @@ public abstract class AbstractComponentConnector extends AbstractConnector
     }
 
     /**
-     * Generates the style name for the widget based on the given primary style
-     * name and the shared state.
+     * Updates the user defined, read-only and error style names for the widget
+     * based the shared state. User defined style names are prefixed with the
+     * primary style name of the widget returned by {@link #getWidget()}
      * <p>
      * This method can be overridden to provide additional style names for the
-     * component
+     * component, for example see
+     * {@link AbstractFieldConnector#updateWidgetStyleNames()}
      * </p>
-     * 
-     * @param primaryStyleName
-     *            The primary style name to use when generating the final style
-     *            names
-     * @return The style names, settable using
-     *         {@link Widget#setStyleName(String)}
      */
-    protected String getStyleNames(String primaryStyleName) {
+    protected void updateWidgetStyleNames() {
         ComponentState state = getState();
 
-        StringBuilder styleBuf = new StringBuilder();
-        styleBuf.append(primaryStyleName);
-        styleBuf.append(" v-connector");
+        String primaryStyleName = getWidget().getStylePrimaryName();
 
-        // Uses connector methods to enable connectors to take hierarchy or
-        // multiple state variables into account
-        if (!isEnabled()) {
-            styleBuf.append(" ");
-            styleBuf.append(ApplicationConnection.DISABLED_CLASSNAME);
-        }
-        if (isReadOnly()) {
-            styleBuf.append(" ");
-            styleBuf.append("v-readonly");
-        }
+        // should be in AbstractFieldConnector ?
+        // add / remove read-only style name
+        setWidgetStyleName("v-readonly", isReadOnly());
+
+        // add / remove error style name
+        setWidgetStyleNameWithPrefix(primaryStyleName,
+                ApplicationConnection.ERROR_CLASSNAME_EXT,
+                null != state.getErrorMessage());
 
-        // add additional styles as css classes, prefixed with component default
-        // stylename
+        // add additional user defined style names as class names, prefixed with
+        // component default class name. remove nonexistent style names.
         if (state.hasStyles()) {
-            for (String style : state.getStyles()) {
-                styleBuf.append(" ");
-                styleBuf.append(primaryStyleName);
-                styleBuf.append("-");
-                styleBuf.append(style);
-                styleBuf.append(" ");
-                styleBuf.append(style);
+            // add new style names
+            List<String> newStyles = new ArrayList<String>();
+            newStyles.addAll(state.getStyles());
+            newStyles.removeAll(styleNames);
+            for (String newStyle : newStyles) {
+                setWidgetStyleName(newStyle, true);
+                setWidgetStyleNameWithPrefix(primaryStyleName + "-", newStyle,
+                        true);
+            }
+            // remove nonexistent style names
+            styleNames.removeAll(state.getStyles());
+            for (String oldStyle : styleNames) {
+                setWidgetStyleName(oldStyle, false);
+                setWidgetStyleNameWithPrefix(primaryStyleName + "-", oldStyle,
+                        false);
+            }
+            styleNames.clear();
+            styleNames.addAll(state.getStyles());
+        } else {
+            // remove all old style names
+            for (String oldStyle : styleNames) {
+                setWidgetStyleName(oldStyle, false);
+                setWidgetStyleNameWithPrefix(primaryStyleName + "-", oldStyle,
+                        false);
             }
+            styleNames.clear();
         }
 
-        // add error classname to components w/ error
-        if (null != state.getErrorMessage()) {
-            styleBuf.append(" ");
-            styleBuf.append(primaryStyleName);
-            styleBuf.append(ApplicationConnection.ERROR_CLASSNAME_EXT);
-        }
+    }
 
-        return styleBuf.toString();
+    /**
+     * This is used to add / remove state related style names from the widget.
+     * <p>
+     * Override this method for example if the style name given here should be
+     * updated in another widget in addition to the one returned by the
+     * {@link #getWidget()}.
+     * </p>
+     * 
+     * @param styleName
+     *            the style name to be added or removed
+     * @param add
+     *            <code>true</code> to add the given style, <code>false</code>
+     *            to remove it
+     */
+    protected void setWidgetStyleName(String styleName, boolean add) {
+        getWidget().setStyleName(styleName, add);
+    }
+
+    /**
+     * This is used to add / remove state related prefixed style names from the
+     * widget.
+     * <p>
+     * Override this method if the prefixed style name given here should be
+     * updated in another widget in addition to the one returned by the
+     * <code>Connector</code>'s {@link #getWidget()}, or if the prefix should be
+     * different. For example see
+     * {@link PopupDateFieldConnector#setWidgetStyleNameWithPrefix(String, String, boolean)}
+     * </p>
+     * 
+     * @param styleName
+     *            the style name to be added or removed
+     * @param add
+     *            <code>true</code> to add the given style, <code>false</code>
+     *            to remove it
+     * @deprecated This will be removed once styles are no longer added with
+     *             prefixes.
+     */
+    @Deprecated
+    protected void setWidgetStyleNameWithPrefix(String prefix,
+            String styleName, boolean add) {
+        if (!styleName.startsWith("-")) {
+            if (!prefix.endsWith("-")) {
+                prefix += "-";
+            }
+        } else {
+            if (prefix.endsWith("-")) {
+                styleName.replaceFirst("-", "");
+            }
+        }
+        getWidget().setStyleName(prefix + styleName, add);
     }
 
     /*
diff --git a/src/com/vaadin/terminal/gwt/client/ui/AbstractFieldConnector.java b/src/com/vaadin/terminal/gwt/client/ui/AbstractFieldConnector.java
index 4be0f02c2a..5bff88c774 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/AbstractFieldConnector.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/AbstractFieldConnector.java
@@ -35,20 +35,15 @@ public abstract class AbstractFieldConnector extends AbstractComponentConnector
     }
 
     @Override
-    protected String getStyleNames(String primaryStyleName) {
-        String styleNames = super.getStyleNames(primaryStyleName);
+    protected void updateWidgetStyleNames() {
+        super.updateWidgetStyleNames();
 
-        if (isModified()) {
-            // add modified classname to Fields
-            styleNames += " " + ApplicationConnection.MODIFIED_CLASSNAME;
-        }
+        // add / remove modified style name to Fields
+        setWidgetStyleName(ApplicationConnection.MODIFIED_CLASSNAME,
+                isModified());
 
-        if (isRequired()) {
-            // add required classname to Fields
-            styleNames += " " + primaryStyleName
-                    + ApplicationConnection.REQUIRED_CLASSNAME_EXT;
-        }
-
-        return styleNames;
+        // add / remove error style name to Fields
+        setWidgetStyleNameWithPrefix(getWidget().getStylePrimaryName(),
+                ApplicationConnection.REQUIRED_CLASSNAME_EXT, isRequired());
     }
 }
diff --git a/src/com/vaadin/terminal/gwt/client/ui/datefield/AbstractDateFieldConnector.java b/src/com/vaadin/terminal/gwt/client/ui/datefield/AbstractDateFieldConnector.java
index b55f480bac..72555214fa 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/datefield/AbstractDateFieldConnector.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/datefield/AbstractDateFieldConnector.java
@@ -63,15 +63,17 @@ public class AbstractDateFieldConnector extends AbstractFieldConnector
             newResolution = VDateField.RESOLUTION_YEAR;
         }
 
+        // Remove old stylename that indicates current resolution
+        setWidgetStyleNameWithPrefix(VDateField.CLASSNAME,
+                VDateField.resolutionToString(getWidget().currentResolution),
+                false);
+
         getWidget().currentResolution = newResolution;
 
         // Add stylename that indicates current resolution
-        getWidget()
-                .addStyleName(
-                        VDateField.CLASSNAME
-                                + "-"
-                                + VDateField
-                                        .resolutionToString(getWidget().currentResolution));
+        setWidgetStyleNameWithPrefix(VDateField.CLASSNAME,
+                VDateField.resolutionToString(getWidget().currentResolution),
+                true);
 
         final int year = uidl.getIntVariable("year");
         final int month = (getWidget().currentResolution >= VDateField.RESOLUTION_MONTH) ? uidl
diff --git a/src/com/vaadin/terminal/gwt/client/ui/datefield/PopupDateFieldConnector.java b/src/com/vaadin/terminal/gwt/client/ui/datefield/PopupDateFieldConnector.java
index e169d83b48..dfe0b327ac 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/datefield/PopupDateFieldConnector.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/datefield/PopupDateFieldConnector.java
@@ -35,14 +35,6 @@ public class PopupDateFieldConnector extends TextualDateConnector {
 
         super.updateFromUIDL(uidl, client);
 
-        String popupStyleNames = getStyleNames(VPopupCalendar.POPUP_PRIMARY_STYLE_NAME);
-        popupStyleNames += " "
-                + VDateField.CLASSNAME
-                + "-"
-                + VPopupCalendar
-                        .resolutionToString(getWidget().currentResolution);
-        getWidget().popup.setStyleName(popupStyleNames);
-
         getWidget().calendar.setDateTimeService(getWidget()
                 .getDateTimeService());
         getWidget().calendar.setShowISOWeekNumbers(getWidget()
@@ -114,4 +106,30 @@ public class PopupDateFieldConnector extends TextualDateConnector {
     public VPopupCalendar getWidget() {
         return (VPopupCalendar) super.getWidget();
     }
+
+    @Override
+    protected void setWidgetStyleName(String styleName, boolean add) {
+        super.setWidgetStyleName(styleName, add);
+
+        // update the style change to popup calendar widget
+        getWidget().popup.setStyleName(styleName, add);
+    }
+
+    @Override
+    protected void setWidgetStyleNameWithPrefix(String prefix,
+            String styleName, boolean add) {
+        super.setWidgetStyleNameWithPrefix(prefix, styleName, add);
+
+        // update the style change to popup calendar widget with the correct
+        // prefix
+        if (!styleName.startsWith("-")) {
+            getWidget().popup.setStyleName(
+                    VPopupCalendar.POPUP_PRIMARY_STYLE_NAME + "-" + styleName,
+                    add);
+        } else {
+            getWidget().popup.setStyleName(
+                    VPopupCalendar.POPUP_PRIMARY_STYLE_NAME + styleName, add);
+        }
+    }
+
 }
diff --git a/src/com/vaadin/terminal/gwt/client/ui/embedded/EmbeddedConnector.java b/src/com/vaadin/terminal/gwt/client/ui/embedded/EmbeddedConnector.java
index af3ad67db4..fe3549e7f2 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/embedded/EmbeddedConnector.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/embedded/EmbeddedConnector.java
@@ -54,6 +54,16 @@ public class EmbeddedConnector extends AbstractComponentConnector implements
         clickEventHandler.handleEventHandlerRegistration();
 
         if (uidl.hasAttribute("type")) {
+            // remove old style name related to type
+            if (getWidget().type != null) {
+                getWidget().removeStyleName(
+                        VEmbedded.CLASSNAME + "-" + getWidget().type);
+            }
+            // remove old style name related to mime type
+            if (getWidget().mimetype != null) {
+                getWidget().removeStyleName(
+                        VEmbedded.CLASSNAME + "-" + getWidget().mimetype);
+            }
             getWidget().type = uidl.getStringAttribute("type");
             if (getWidget().type.equals("image")) {
                 getWidget().addStyleName(VEmbedded.CLASSNAME + "-image");
@@ -118,13 +128,25 @@ public class EmbeddedConnector extends AbstractComponentConnector implements
                 VConsole.log("Unknown Embedded type '" + getWidget().type + "'");
             }
         } else if (uidl.hasAttribute("mimetype")) {
+            // remove old style name related to type
+            if (getWidget().type != null) {
+                getWidget().removeStyleName(
+                        VEmbedded.CLASSNAME + "-" + getWidget().type);
+            }
+            // remove old style name related to mime type
+            if (getWidget().mimetype != null) {
+                getWidget().removeStyleName(
+                        VEmbedded.CLASSNAME + "-" + getWidget().mimetype);
+            }
             final String mime = uidl.getStringAttribute("mimetype");
             if (mime.equals("application/x-shockwave-flash")) {
+                getWidget().mimetype = "flash";
                 // Handle embedding of Flash
                 getWidget().addStyleName(VEmbedded.CLASSNAME + "-flash");
                 getWidget().setHTML(getWidget().createFlashEmbed(uidl));
 
             } else if (mime.equals("image/svg+xml")) {
+                getWidget().mimetype = "svg";
                 getWidget().addStyleName(VEmbedded.CLASSNAME + "-svg");
                 String data;
                 Map<String, String> parameters = VEmbedded.getParameters(uidl);
diff --git a/src/com/vaadin/terminal/gwt/client/ui/embedded/VEmbedded.java b/src/com/vaadin/terminal/gwt/client/ui/embedded/VEmbedded.java
index 5edd31174d..1d2a5a156a 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/embedded/VEmbedded.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/embedded/VEmbedded.java
@@ -26,6 +26,7 @@ public class VEmbedded extends HTML {
     protected Element browserElement;
 
     protected String type;
+    protected String mimetype;
 
     protected ApplicationConnection client;
 
diff --git a/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.html b/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.html
new file mode 100644
index 0000000000..a09a1e06e5
--- /dev/null
+++ b/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.html
@@ -0,0 +1,456 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="http://localhost:8888/" />
+<title>AddRemoveSetStyleNamesTest</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">AddRemoveSetStyleNamesTest</td></tr>
+</thead><tbody>
+<tr>
+	<td>open</td>
+	<td>run/com.vaadin.tests.components.AddRemoveSetStyleNamesTest?restartApplication</td>
+	<td></td>
+</tr>
+<!--add style 1. assert style1-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<!--add style 2. assert style1, style2-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[1]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style2</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style2</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style2</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style2</td>
+</tr>
+<!--remove style 1. assertNot style1. assert style2-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style2</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style2</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style2</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style2</td>
+</tr>
+<!--remove style 2. assertNot style1, style2-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[1]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style2</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style2</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style2</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style2</td>
+</tr>
+<!--add style1. set thestyle. assertNot style1. assert thestyle.-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[2]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-thestyle</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>thestyle</td>
+</tr>
+<!--remove thestyle. assertNot thestyle-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[2]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>thestyle</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-thestyle</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-thestyle</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>thestyle</td>
+</tr>
+<!--set thestyle. add style1. assert thestyle, style1-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[2]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>thestyle</td>
+</tr>
+<!--remove style 1. assertNot style1. assert thestyle-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>thestyle</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-thestyle</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>thestyle</td>
+</tr>
+<!--add style 1. remove thestyle. assertNot style1, thestyle-->
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VButton[2]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>v-datefield-thestyle</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]</td>
+	<td>thestyle</td>
+</tr>
+<tr>
+	<td>mouseClick</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::/VVerticalLayout[0]/VVerticalLayout[0]/VPopupCalendar[0]#popupButton</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-style1</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>style1</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>v-datefield-popup-thestyle</td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentsAddRemoveSetStyleNamesTest::Root/VOverlay[0]</td>
+	<td>thestyle</td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
diff --git a/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.java b/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.java
new file mode 100644
index 0000000000..21cf9e45a6
--- /dev/null
+++ b/tests/testbench/com/vaadin/tests/components/AddRemoveSetStyleNamesTest.java
@@ -0,0 +1,81 @@
+package com.vaadin.tests.components;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.PopupDateField;
+
+public class AddRemoveSetStyleNamesTest extends TestBase {
+
+    private String style1 = "style1";
+    private String style2 = "style2";
+    private String thestyle = "thestyle";
+
+    private PopupDateField popupDateField;
+    private Button button1;
+    private Button button2;
+    private Button button3;
+
+    private Button.ClickListener listener;
+
+    @Override
+    protected void setup() {
+        popupDateField = new PopupDateField("PopupDateField");
+        popupDateField.setRequired(true);
+        popupDateField.setRequiredError("abcd");
+        addComponent(popupDateField);
+
+        listener = new Button.ClickListener() {
+
+            public void buttonClick(ClickEvent event) {
+                String style = (String) event.getButton().getData();
+                setComponentsStyle(style, !popupDateField.getStyleName()
+                        .contains(style), event.getButton());
+            }
+        };
+
+        button1 = new Button("Add style1", listener);
+        button1.setData(style1);
+        addComponent(button1);
+
+        button2 = new Button("Add style2", listener);
+        button2.setData(style2);
+        addComponent(button2);
+
+        button3 = new Button("Set thestyle", new Button.ClickListener() {
+
+            public void buttonClick(ClickEvent event) {
+                if (popupDateField.getStyleName().contains(thestyle)) {
+                    popupDateField.removeStyleName(thestyle);
+                    button3.setCaption("Set thestyle");
+                } else {
+                    popupDateField.setStyleName(thestyle);
+                    button1.setCaption("Add style1");
+                    button2.setCaption("Add style2");
+                    button3.setCaption("Remove thestyle");
+                }
+            }
+        });
+        addComponent(button3);
+    }
+
+    private void setComponentsStyle(String style, boolean add, Button button) {
+        if (add) {
+            popupDateField.addStyleName(style);
+            button.setCaption("Remove " + style);
+        } else {
+            popupDateField.removeStyleName(style);
+            button.setCaption("Add " + style);
+        }
+    }
+
+    @Override
+    protected String getDescription() {
+        return "If a widget has set multiple css class names, AbtractComponentConnector.getStyleNames() removes all but first one of them. This is not acceptable, because we should be able to create connector for any existing GWT component and thus we do not know it it depends on multiple css class names.";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 8664;
+    }
+
+}
\ No newline at end of file