Fire attributeChangedCallback on style changes for Custom Elements V1

third_party/WebKit/LayoutTests/custom-elements/spec/callback.html

Index: third_party/WebKit/LayoutTests/custom-elements/spec/callback.html
diff --git a/third_party/WebKit/LayoutTests/custom-elements/spec/callback.html b/third_party/WebKit/LayoutTests/custom-elements/spec/callback.html
index 4c304f764cb5a4746cb86909c1ce415c43a0eed5..329734b552b6df25d18f4d8c9c491892069ac117 100644
--- a/third_party/WebKit/LayoutTests/custom-elements/spec/callback.html
+++ b/third_party/WebKit/LayoutTests/custom-elements/spec/callback.html
@@ -91,6 +91,69 @@
   test_with_window(w => {
     let document = w.document;
     let element = document.createElement('a-a');
+    document.body.appendChild(element);
+    let logs = define_logger(w, ['style']);
+
+    logs.length = 0;
+    element.style.color = 'red';
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']);
+
+    logs.length = 0;
+    element.style.color = 'green';
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', 'color: red;', 'color: green;', '']);
+
+    logs.length = 0;
+    element.style.color = '';
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', 'color: green;', null, '']);
+  }, 'style.color should enqueue attributeChangedCallback for style attribute');
+
+  test_with_window(w => {
+    let document = w.document;
+    let element = document.createElement('a-a');
+    document.body.appendChild(element);
+    let logs = define_logger(w, ['style']);
+
+    logs.length = 0;
+    element.style.cssText = 'color: red';

[dominicc (has gone to gerrit), 2016/07/22 01:14:01]

Please add cssFloat tests.

+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']);
+  }, 'style.cssText should enqueue attributeChangedCallback for style attribute');
+
+  test_with_window(w => {
+    let document = w.document;
+    let element = document.createElement('a-a');
+    document.body.appendChild(element);
+    let logs = define_logger(w, ['style']);
+
+    logs.length = 0;
+    element.style.setProperty('color', 'red');
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']);
+
+    logs.length = 0;
+    element.style.removeProperty('color', 'red');
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['style', 'color: red;', null, '']);
+  }, 'style.color should enqueue attributeChangedCallback for style attribute');

[dominicc (has gone to gerrit), 2016/07/22 01:14:01]

This is really testing setProperty, removeProperty more than *color* per se. Use
a more accurate description.

+
+  test_with_window(w => {
+    let document = w.document;
+    let element = document.createElement('a-a');
+    document.body.appendChild(element);
+    let logs = define_logger(w, ['lang']);
+
+    logs.length = 0;
+    element.lang = 'ja-jp';
+    assert_equals(logs.length, 1);
+    assert_log_is_type(logs, 0, attributeChanged, element, ['lang', null, 'ja-jp', '']);
+  }, 'lang property setter should enqueue attributeChangedCallback for lang attribute');
+
+  test_with_window(w => {
+    let document = w.document;
+    let element = document.createElement('a-a');
     element.setAttribute('x', '1');
     document.body.appendChild(element);
     let logs = define_logger(w, ['x']);