| <!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, ".", decimal)'); |
| |
| 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> |
