From 41bcb1ce0fa0365073d515b3d96f2668c62d4153 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 1 Apr 2019 11:59:53 -0700
Subject: [PATCH] Ensure `className` bindings work correctly when
 `ShadyDOM.noPatch` is used.

Puts `className` on `Polymer.dom` and ensures any sets to `className` in the binding system, go through that wrapper.

Note, depends on https://github.com/webcomponents/shadydom/pull/326.
---
 lib/legacy/polymer.dom.js          |  2 +-
 lib/mixins/property-effects.js     |  8 ++++
 test/unit/polymer-dom-nopatch.html | 62 ++++++++++++++++++++++++++++++
 test/unit/polymer-dom.html         | 58 +++++++++++++++++++++++++++-
 4 files changed, 128 insertions(+), 2 deletions(-)

diff --git a/lib/legacy/polymer.dom.js b/lib/legacy/polymer.dom.js
index 6d7f0eb667..e81a6c2519 100644
--- a/lib/legacy/polymer.dom.js
+++ b/lib/legacy/polymer.dom.js
@@ -441,7 +441,7 @@ if (window['ShadyDOM'] && window['ShadyDOM']['inUse'] && window['ShadyDOM']['noP
   ]);
 
   forwardProperties(DomApiNative.prototype, [
-    'textContent', 'innerHTML'
+    'textContent', 'innerHTML', 'className'
   ]);
 }
 
diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js
index 65a2e31f80..8ea00b54e9 100644
--- a/lib/mixins/property-effects.js
+++ b/lib/mixins/property-effects.js
@@ -738,6 +738,10 @@ function setupCompoundStorage(node, binding) {
     storage[target] = literals;
     // Configure properties with their literal parts
     if (binding.literal && binding.kind == 'property') {
+      // Note, className needs style scoping so this needs wrapping.
+      if (target === 'className') {
+        node = wrap(node);
+      }
       node[target] = binding.literal;
     }
   }
@@ -1428,6 +1432,10 @@ export const PropertyEffects = dedupingMixin(superClass => {
       // implement a whitelist of tag & property values that should never
       // be reset (e.g. <input>.value && <select>.value)
       if (value !== node[prop] || typeof value == 'object') {
+        // Note, className needs style scoping so this needs wrapping.
+        if (prop === 'className') {
+          node = wrap(node);
+        }
         node[prop] = value;
       }
     }
diff --git a/test/unit/polymer-dom-nopatch.html b/test/unit/polymer-dom-nopatch.html
index 6a7e697110..b1bfc218c3 100644
--- a/test/unit/polymer-dom-nopatch.html
+++ b/test/unit/polymer-dom-nopatch.html
@@ -72,6 +72,37 @@
 </script>
   </dom-module>
 
+<dom-module id="x-class-bindings">
+<template>
+  <style>
+    .a {
+      border: 2px solid orange;
+    }
+
+    .aa {
+      border: 12px solid red;
+    }
+
+    .b {
+      padding: 4px;
+    }
+  </style>
+  <div>
+    <div id="class" class$="[[clazz]] b">class</div>
+    <div id="className" class-name="[[clazz]] b">class</div>
+  </div>
+</template>
+<script type="module">
+  import { Polymer } from '../../polymer-legacy.js';
+  Polymer({
+    properties: {
+      clazz: {type: String}
+    },
+    is: 'x-class-bindings'
+  });
+</script>
+</dom-module>
+
    <test-fixture id="scoped">
     <template>
       <x-event-scoped></x-event-scoped>
@@ -493,6 +524,37 @@
     assert.equal(el.className, 'foo');
   });
 
+  test('className', function() {
+    dom(el).className = 'foo';
+    assert.isTrue(el.classList.contains('foo'));
+  });
+
+  test('class bindings work and remained scoped', function() {
+    const el = document.createElement('x-class-bindings');
+    document.body.appendChild(el);
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    el.clazz = 'a';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    el.clazz = 'aa';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    document.body.removeChild(el);
+  })
+
 });
 </script>
 
diff --git a/test/unit/polymer-dom.html b/test/unit/polymer-dom.html
index 30cc025654..6a9c1ea7e4 100644
--- a/test/unit/polymer-dom.html
+++ b/test/unit/polymer-dom.html
@@ -67,7 +67,38 @@
   is: 'x-focusable-in-shadow'
 });
 </script>
-  </dom-module>
+</dom-module>
+
+<dom-module id="x-class-bindings">
+<template>
+  <style>
+    .a {
+      border: 2px solid orange;
+    }
+
+    .aa {
+      border: 12px solid red;
+    }
+
+    .b {
+      padding: 4px;
+    }
+  </style>
+  <div>
+    <div id="class" class$="[[clazz]] b">class</div>
+    <div id="className" class-name="[[clazz]] b">class</div>
+  </div>
+</template>
+<script type="module">
+  import { Polymer } from '../../polymer-legacy.js';
+  Polymer({
+    properties: {
+      clazz: {type: String}
+    },
+    is: 'x-class-bindings'
+  });
+</script>
+</dom-module>
 
    <test-fixture id="scoped">
     <template>
@@ -480,6 +511,31 @@
     assert.equal(el.className, 'foo');
   });
 
+  test('className', function() {
+    dom(el).className = 'foo';
+    assert.isTrue(el.classList.contains('foo'));
+  });
+
+  test('class bindings', function() {
+    const el = document.createElement('x-class-bindings');
+    document.body.appendChild(el);
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    el.clazz = 'a';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    el.clazz = 'aa';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    document.body.removeChild(el);
+  })
+
 });
 </script>