<!DOCTYPE html>
<html>
<head>
<style>
@namespace html url(http://www.w3.org/1999/xhtml);
@supports (font-weight: 'San Francisco') { }
div { content: '{foo: "bar"}'; }
span[class="foo bar"] { color: green; }
.counter { content: counters(section, "."); }
article { font-family: 'Two Infinite Loop', 'Cupertino CA';}
section { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'><rect width='100px' height='100px' fill='lightgreen' stroke='green' stroke-width='1px'/></svg>"); }
.shape { -webkit-clip-path: path('M100,40l20,0 0,60'); }
</style>
</head>
<body>
<div></div><span class="foo bar"></span><article></article><section></section><div class="shape"></div>
<script src="../../resources/js-test.js"></script>
<script>

description('Tests serializing various strings with quotation marks.');

var styleSheet = document.querySelector('style').sheet;

var namespaceRule = styleSheet.rules[0];
shouldBeEqualToString('namespaceRule.cssText', '@namespace html url("http://www.w3.org/1999/xhtml");');

var supportsRule = styleSheet.rules[1];
shouldBeEqualToString('supportsRule.conditionText', '(font-weight: "San Francisco")');

var ruleWithJSONContent = styleSheet.rules[2];
shouldBeEqualToString('ruleWithJSONContent.style.content', '"{foo: \\"bar\\"}"');

var div = document.querySelector('div');
shouldBeEqualToString('value = getComputedStyle(div).getPropertyValue("content"); value', '"{foo: \\"bar\\"}"');
shouldBeEqualToString(`parsed = eval(value.replace(/^\'/, "").replace(/\'$/, ""));`, '{foo: "bar"}');

var ruleWithAttributeSelector = styleSheet.rules[3];
shouldBeEqualToString('ruleWithAttributeSelector.selectorText', 'span[class=\"foo bar\"]');
shouldBeEqualToString(`getComputedStyle(document.querySelector("span[class='foo bar']")).getPropertyValue("color")`, 'rgb(0, 128, 0)');

var counterRule = styleSheet.rules[4];
shouldBeEqualToString('counterRule.style.content', 'counters(section, ".")');

var fontFamilyRule = styleSheet.rules[5];
shouldBeEqualToString('fontFamilyRule.style.fontFamily', '"Two Infinite Loop", "Cupertino CA"');
shouldBeEqualToString('getComputedStyle(document.querySelector("article")).getPropertyValue("font-family")',
    '"Two Infinite Loop", "Cupertino CA"');

var backgroundImageRule = styleSheet.rules[6];
var url = `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'><rect width='100px' height='100px' fill='lightgreen' stroke='green' stroke-width='1px'/></svg>")`;
shouldBeEqualToString('backgroundImageRule.style.backgroundImage', url);
shouldBeEqualToString('getComputedStyle(document.querySelector("section")).backgroundImage', url);

var shapeRule = styleSheet.rules[7];
var path = `path("M 100 40 l 20 0 l 0 60")`;
shouldBeEqualToString('shapeRule.style["-webkit-clip-path"]', path);
shouldBeEqualToString('getComputedStyle(document.querySelector(".shape"))["-webkit-clip-path"]', path);

</script>
</body>
</html>