<!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>