<!DOCTYPE HTML>
<title>SVGLengthList, replaceItem()</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGLengthList-helper.js"></script>
<svg width="200" height="200">
    <text id="text1" x="500 1000 1500" y="50">  ABC   </text>
    <text id="text2" x="500 100 150 50" y="75"> ABC   </text>
    <text id="text3" x="50 50 100 100 150" y="100">  ABC</text>
    <text id="text4" x="100 50 150 150" y="125">   ABC</text>
</svg>
<script>
test(function() {
  // This is a test of the SVGLengthList.replaceItem() API.

  var svg = document.querySelector("svg");
  var list1 = document.getElementById("text1").x.baseVal;
  var list2 = document.getElementById("text2").x.baseVal;
  var list3 = document.getElementById("text3").x.baseVal;
  var list4 = document.getElementById("text4").x.baseVal;

  // Create three SVGLength objects, with values=50,100,150.
  var newLength1 = svg.createSVGLength();
  newLength1.value = 50;
  assert_equals(newLength1.value, 50);

  var newLength2 = svg.createSVGLength();
  newLength2.value = 100;
  assert_equals(newLength2.value, 100);

  var newLength3 = svg.createSVGLength();
  newLength3.value = 150;
  assert_equals(newLength3.value, 150);

  // Check initial list state of text1.
  assert_list(list1, [500, 1000, 1500]);

  // Replace the first three values in text1 x list with 'newLength1/2/3'.
  assert_equals(list1.replaceItem(newLength1, 0).value, newLength1.value);
  assert_equals(list1.replaceItem(newLength2, 1).value, newLength2.value);
  assert_equals(list1.replaceItem(newLength3, 2).value, newLength3.value);
  assert_throws("IndexSizeError", function() { list1.replaceItem(newLength3, -100); });
  assert_throws("IndexSizeError", function() { list1.replaceItem(newLength3, -1); });
  assert_throws("IndexSizeError", function() { list1.replaceItem(newLength3, 3); });
  assert_throws("IndexSizeError", function() { list1.replaceItem(newLength3, 100); });

  // Verify that the text1 x value list is correct.
  assert_list(list1, [50, 100, 150]);

  // Check initial list state of text2.
  assert_list(list2, [500, 100, 150, 50]);

  // Spec: If newItem is already in a list, then a new object is created with the same values as newItem and this item is inserted into the list.
  // Otherwise, newItem itself is inserted into the list.

  // Replace the first item in text2 x list with the fourth item in the list/
  assert_equals(list2.replaceItem(list2.getItem(3), 0).value, 50);
  assert_list(list2, [50, 100, 150, 50]);

  // Check initial list state of text3.
  assert_list(list3, [50, 50, 100, 100, 150]);

  // Check initial list state of text4.
  assert_list(list4, [100, 50, 150, 150]);

  // Replace the first item in text4 x list with the second item in the text3 x list.
  assert_equals(list4.replaceItem(list3.getItem(1), 0).value, 50);
  assert_list(list3, [50, 50, 100, 100, 150]);
  assert_list(list4, [50, 50, 150, 150]);

  // Replace the second item in text4 x list with the third item in the text3 x list.
  assert_equals(list4.replaceItem(list3.getItem(2), 1).value, 100);
  assert_list(list4, [50, 100, 150, 150]);

  // Replace the items of text3 x list with the same text3 x list.
  assert_equals(list3.replaceItem(list3.getItem(2), 1).value, 100);
  assert_equals(list3.replaceItem(list3.getItem(4), 2).value, 150);
  assert_list(list3, [50, 100, 150, 100, 150]);

  // Check final list state of text1.
  assert_list(list1, [50, 100, 150]);

  // Check final list state of text2.
  assert_list(list2, [50, 100, 150, 50]);

  // Check final list state of text3.
  assert_list(list3, [50, 100, 150, 100, 150]);

  // Check final list state of text4.
  assert_list(list4, [50, 100, 150, 150]);
});
</script>