<!DOCTYPE html>
<title>clip-path url(...) serialization</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
function computedValue(property, value) {
  let div = document.createElement("div");
  document.body.appendChild(div);
  div.style.setProperty(property, value);
  let computedValue = getComputedStyle(div).getPropertyValue(property);
  document.body.removeChild(div);
  return computedValue;
}

function specifiedValue(property, value) {
  let div = document.createElement("div");
  div.style.setProperty(property, value);
  return div.style.getPropertyValue(property);
}

function resolveUrl(url) {
  let anchor = document.createElement('a');
  anchor.href = url;
  return anchor.href;
}

test(() => {
  assert_equals(specifiedValue("clip-path", "url(#clip1)"), 'url("#clip1")');
  assert_equals(specifiedValue("clip-path", "url(clip.svg#clip1)"),
                'url("clip.svg#clip1")');
}, document.title + ', specified');

test(() => {
  let resolved_url = resolveUrl("clip.svg#clip1");
  assert_equals(computedValue("clip-path", "url(#clip1)"), 'url("#clip1")');
  assert_equals(computedValue("clip-path", "url(clip.svg#clip1)"),
                'url("' + resolved_url + '")');
}, document.title + ', computed');
</script>
</body>