SVGAnimatedEnumeration-SVGMarkerElement.html

<!DOCTYPE HTML>

<title>Use of SVGAnimatedEnumeration within SVGMarkerElement</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

function createMarker() {

  let markerElement = document.createElementNS("http://www.w3.org/2000/svg", "marker");

  markerElement.setAttribute("markerUnits", "userSpaceOnUse");

  markerElement.setAttribute("orient", "auto");

  return markerElement;

function createSVGAngle() {

  let svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  return svgElement.createSVGAngle();

test(function() {

  // This test checks the use of SVGAnimatedEnumeration within SVGMarkerElement.

  let markerElement = createMarker();

  // markerUnits

  // Check initial 'markerUnits' value.

  assert_true(markerElement.markerUnits instanceof SVGAnimatedEnumeration);

  assert_equals(typeof(markerElement.markerUnits.baseVal), "number");

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE);

  // Switch to 'strokeWidth'.

  markerElement.markerUnits.baseVal = SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH;

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);

  assert_equals(markerElement.getAttribute('markerUnits'), "strokeWidth");

  // Try setting invalid values.

  assert_throws_js(TypeError, function() { markerElement.markerUnits.baseVal = 3; });

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);

  assert_equals(markerElement.getAttribute('markerUnits'), "strokeWidth");

  assert_throws_js(TypeError, function() { markerElement.markerUnits.baseVal = -1; });

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);

  assert_equals(markerElement.getAttribute('markerUnits'), "strokeWidth");

  assert_throws_js(TypeError, function() { markerElement.markerUnits.baseVal = 0; });

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);

  assert_equals(markerElement.getAttribute('markerUnits'), "strokeWidth");

  // Switch to 'userSpaceOnUse'

  markerElement.markerUnits.baseVal = SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE;

  assert_equals(markerElement.markerUnits.baseVal, SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE);

  assert_equals(markerElement.getAttribute('markerUnits'), "userSpaceOnUse");

}, "Test SVGAnimatedEnumeration");

test(function() {

  let markerElement = createMarker();

  // orientType

  // Check initial 'orient' value.

  assert_true(markerElement.orientType instanceof SVGAnimatedEnumeration);

  assert_equals(typeof(markerElement.orientType.baseVal), "number");

  assert_equals(markerElement.orientAngle.baseVal.value, 0);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

  // Switch to 'Pi/2 rad' value - via setOrientToAngle().

  let anglePiHalfRad = createSVGAngle();

  anglePiHalfRad.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, (Math.PI / 2).toFixed(2));

  markerElement.setOrientToAngle(anglePiHalfRad);

  assert_equals(markerElement.orientAngle.baseVal.value.toFixed(1), "90.0");

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_RAD);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), (Math.PI / 2).toFixed(2) + "rad");

  // Switch to 'auto' value - via setOrientToAuto().

  markerElement.setOrientToAuto();

  assert_equals(markerElement.orientAngle.baseVal.value, 0);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

  assert_equals(markerElement.getAttribute('orient'), "auto");

  // Switch to '20deg' value - via setOrientToAngle().

  let angle20deg = createSVGAngle();

  angle20deg.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 20);

  markerElement.setOrientToAngle(angle20deg);

  assert_equals(markerElement.orientAngle.baseVal.value, 20);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_DEG);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), "20deg");

  // Switch to '10deg' value.

  markerElement.orientAngle.baseVal.value = 10;

  assert_equals(markerElement.orientAngle.baseVal.value, 10);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_DEG);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), "10deg");

  // Switch to 'auto' value - by modifying orientType.

  markerElement.orientType.baseVal = SVGMarkerElement.SVG_MARKER_ORIENT_AUTO;

  assert_equals(markerElement.orientAngle.baseVal.value, 0);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

  assert_equals(markerElement.getAttribute('orient'), "auto");

  markerElement.setAttribute('orient', '10deg');

  // Try setting invalid values.

  assert_throws_js(TypeError, function() { markerElement.orientType.baseVal = 4; });

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), "10deg");

  assert_throws_js(TypeError, function() { markerElement.orientType.baseVal = -1; });

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), "10deg");

  assert_throws_js(TypeError, function() { markerElement.orientType.baseVal = 0; });

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

  assert_equals(markerElement.getAttribute('orient'), "10deg");

  // Switch back to 'auto' value.

  markerElement.orientType.baseVal = SVGMarkerElement.SVG_MARKER_ORIENT_AUTO;

  assert_equals(markerElement.orientAngle.baseVal.value, 0);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

  assert_equals(markerElement.getAttribute('orient'), "auto");

}, "Test SVGOrient");

test(function() {

  let markerElement = createMarker();

  markerElement.setAttribute('orient', '400grad');

  assert_equals(markerElement.orientAngle.baseVal.value, 360);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_GRAD);

}, "Test grad units");

test(function() {

  let markerElement = createMarker();

  markerElement.setAttribute('orient', '1turn');

  assert_equals(markerElement.orientAngle.baseVal.value, 360);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNKNOWN);

  let angle = createSVGAngle();

  angle = markerElement.orientAngle.baseVal;

  angle.value = 720;

  markerElement.setOrientToAngle(angle);

  assert_equals(markerElement.getAttribute('orient'), "2turn");

}, "Test turn units");

test(function() {

  let markerElement = createMarker();

  // Switch to 'auto-start-reverse' value - by modifying orientType.

  markerElement.orientType.baseVal = SVGMarkerElement.SVG_MARKER_ORIENT_AUTO_START_REVERSE;

  assert_equals(markerElement.orientAngle.baseVal.value, 0);

  assert_equals(markerElement.orientAngle.baseVal.unitType, SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);

  assert_equals(markerElement.orientType.baseVal, SVGMarkerElement.SVG_MARKER_ORIENT_AUTO_START_REVERSE);

  assert_equals(markerElement.getAttribute('orient'), "auto-start-reverse");

}, "Test auto-start-reverse");

</script>