SVGLengthList-dom-modifications.html

<!DOCTYPE HTML>
<title>SVGLengthList, reaction to DOM modifications</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg width="200" height="200">
    <text x="500 1000 1500" y="50">   ABC  </text>
</svg>
<script>
test(function() {
  // This is a test how SVGLengthList reacts to DOM modifications.

  var text = document.querySelector("text");
  var list = text.x.baseVal;
  assert_equals(list.numberOfItems, 3);

  var item0 = list.getItem(0);
  var item1 = list.getItem(1);
  var item2 = list.getItem(2);

  assert_equals(item0.value, 500);
  assert_equals(item1.value, 1000);
  assert_equals(item2.value, 1500);

  // Setting x = x - 250 on all three items.
  
  item0.value -= 250;
  item1.value -= 250;
  item2.value -= 250;

  assert_equals(item0.value, 250);
  assert_equals(item1.value, 750);
  assert_equals(item2.value, 1250);

  // Now using text.setAttribute('x', '50 100').
  text.setAttribute("x", "50 100");

  // Assure that the wrappers still point to the OLD values.
  assert_equals(item0.value, 250);
  assert_equals(item1.value, 750);
  assert_equals(item2.value, 1250);

  // Assure that obtaining new wrappers will give the right NEW values.
  assert_equals(list.numberOfItems, 2);
  assert_equals(list.getItem(0).value, 50);
  assert_equals(list.getItem(1).value, 100);

  // Setting x = x + 100 on all old wrapper items.
  item0.value += 100;
  item1.value += 100;
  item2.value += 100;

  // Assure that the old wrappers can still be modified, but don't influence the new wrappers.
  assert_equals(item0.value, 350);
  assert_equals(item1.value, 850);
  assert_equals(item2.value, 1350);

  // Assure that the new wrappers stayed the same.
  assert_equals(list.numberOfItems, 2);
  assert_equals(list.getItem(0).value, 50);
  assert_equals(list.getItem(1).value, 100);
});
</script>
chromium/third_party/blink/web_tests/svg/dom/SVGLengthList-dom-modifications.html
