const circle = new Circle({
    id: 'my-id',
    style: { r: 10 },
});

circle.id; // 'my-id';

circle.className = 'c1 c2';
circle.classList; // ['c1', 'c2']

const circle = new Circle({ style: { r: 10 } });

circle.attributes.r; // 10;

const circle = new Circle({
  style: {
    r: 100,
    fill: '#f00',
  },
});

/**
 * user-defined values
 */
expect(circle.getAttribute('r')).toBe(100);
expect(circle.getAttribute('fill')).toBe('#f00');

/**
 * computed values
 */
const styleMap = circle.computedStyleMap();
expect((styleMap.get('r') as CSSUnitValue).equals(CSS.px(100))).to.be.true;
const fill = styleMap.get('fill') as CSSRGB;
expect(fill.r).toBe(255);
expect(fill.g).toBe(0);
expect(fill.b).toBe(0);
expect(fill.alpha).toBe(1);

append(...nodes: Element[]): void

parent.appendChild(child1);
parent.appendChild(child2); // parent -> [child1, child2]
parent.append(child3, child34); // parent -> [child1, child2, child3, child4]

prepend(...nodes: Element[]): void

parent.appendChild(child1);
parent.appendChild(child2); // parent -> [child1, child2]
parent.prepend(child3, child34); // parent -> [child3, child4, child1, child2]

circle.after(sibling1, sibling2); // [circle, sibling1, sibling2]

after(...nodes: Element[]): void

circle.before(sibling1, sibling2); // [sibling1, sibling2, circle]

before(...nodes: Element[]): void

circle.remove();

remove(): void

parent.removeChildren();

parent.appendChild(child1);
parent.appendChild(child2); // parent -> [child1, child2]
child1.replaceWith(node1, node2); // parent -> [node1, node2, child2]

parent.replaceChildren(child1, child2);
parent.replaceChildren(); // 清空

replaceChildren(...nodes: Element[]): void