62 lines
2.9 KiB
HTML
62 lines
2.9 KiB
HTML
<!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>
|