Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/css-ui/appearance-serialization.html

Repository navigation

<!DOCTYPE html>

<html>

<head>

<title>Serialization of `appearance`</title>

</head>

<body>

test(function() {

var input = document.createElement('input');

input.style.setProperty('appearance', 'none');

assert_equals(input.style.cssText, 'appearance: none;');

}, 'serialization via CSSStyleDeclaration');

test(function(t) {

var style = document.createElement('style');

document.body.appendChild(style);

t.add_cleanup(function() {

document.body.removeChild(style);

});

style.sheet.insertRule('#foo {}', 0);

style.sheet.cssRules[0].style.setProperty('appearance', 'none');

assert_equals(

style.sheet.cssRules[0].cssText, '#foo { appearance: none; }'

);

}, 'serialization via CSSStyleRule');

test(function(t) {

var style = document.createElement('style');

document.body.appendChild(style);

t.add_cleanup(function() {

document.body.removeChild(style);

});

style.sheet.insertRule('@media print { #foo {} }', 0);

style.sheet.cssRules[0].cssRules[0].style.setProperty('appearance', 'none');

assert_equals(

style.sheet.cssRules[0].cssText,

'@media print {\n #foo { appearance: none; }\n}'

);

}, 'serialization via CSSMediaRule');

</script>

</body>