css/cssom/CSSStyleDeclaration-indexed-properties.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSSStyleDeclaration indexed property access</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="div"></div>
<script>
"use strict";

const div = document.getElementById("div");

test(() => {
  div.style.setProperty("color", "red");
  div.style.setProperty("background-color", "blue");

  assert_equals(div.style[0], "color");
  assert_equals(div.style[1], "background-color");
  assert_equals(div.style[2], undefined);
}, "indexed access returns property names in insertion order");

test(() => {
  div.style.cssText = "margin-top: 5px; padding: 10px";

  assert_equals(div.style[0], "margin-top");
  assert_equals(div.style[1], "padding-top");
  assert_equals(div.style[2], "padding-right");
  assert_equals(div.style[3], "padding-bottom");
  assert_equals(div.style[4], "padding-left");
  assert_equals(div.style[div.style.length], undefined);
}, "indexed access works after setting cssText");

test(() => {
  div.style.cssText = "color: red; background-color: blue";
  div.style.removeProperty("color");

  assert_equals(div.style.length, 1);
  assert_equals(div.style[0], "background-color");
  assert_equals(div.style[1], undefined);
}, "indexed access updates after removeProperty");

test(() => {
  div.style.cssText = "";

  assert_equals(div.style.length, 0);
  assert_equals(div.style[0], undefined);
}, "indexed access on empty style returns undefined");

test(() => {
  div.style.cssText = "color: red";

  assert_false("1" in div.style);
  assert_true("0" in div.style);
}, "in operator works for indexed properties");

test(() => {
  div.style.cssText = "color: red; background-color: blue";

  const keys = [];
  for (const key in div.style) {
    if (key === "0" || key === "1") {
      keys.push(key);
    }
  }
  assert_equals(keys.length, 2);
  assert_equals(keys[0], "0");
  assert_equals(keys[1], "1");
}, "indexed properties are enumerable");
</script>