<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script>

description('This tests observing a custom element, which observes "style" content attribute, with a MutationObserver.');

let attributeChanges = [];
class SomeElement extends HTMLElement {
    static observedAttributes = ["style"]; 
    constructor() {
        super();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        attributeChanges.push({name, oldValue, newValue});
    }
};
customElements.define('some-element', SomeElement);

const observer = new MutationObserver((records) => { });
shouldBe('observer.takeRecords().length', '0');
shouldBe('attributeChanges.length', '0');
evalAndLog('element = document.createElement("some-element"); observer.observe(element, {attributes: true});');
evalAndLog('element.style.width = "100px";');
shouldBe('records = observer.takeRecords(); records.length', '1');
shouldBe('records[0].target', 'element');
shouldBeEqualToString('records[0].type', 'attributes');
shouldBe('records[0].oldValue', 'null');
shouldBe('attributeChanges.length', '1');
shouldBeEqualToString('attributeChanges[0].name', 'style');
shouldBe('attributeChanges[0].oldValue', 'null');
shouldBeEqualToString('attributeChanges[0].newValue', 'width: 100px;');
evalAndLog('element.style.color = "red";');
shouldBe('records = observer.takeRecords(); records.length', '1');
shouldBe('records[0].target', 'element');
shouldBeEqualToString('records[0].type', 'attributes');
shouldBe('records[0].oldValue', 'null');
shouldBe('attributeChanges.length', '2');
shouldBeEqualToString('attributeChanges[1].name', 'style');
shouldBeEqualToString('attributeChanges[1].oldValue', 'width: 100px;');
shouldBeEqualToString('attributeChanges[1].newValue', 'width: 100px; color: red;');

</script>
</body>
</html>