<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=575672 --> <head> <title>Test for Bug 575672</title> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <style type="text/css" id="style"></style> <style type="text/css"> #display { position: relative } </style> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=575672">Mozilla Bug 575672</a> <p id="display"></p> <div id="content" style="display: none"> </div> <pre id="test"> <script type="application/javascript"> /** Test for unclosed parentheses in CSS values. **/ // Each of the following semicolon-terminated @-rules should have a // single missing ')' in the value. var semirules = [ "@import (", "@import url(", "@import url(foo", "@import url('foo'", "@import foo(", ]; // Each of the following declarations should have a single missing ')' // in the value. var declarations = [ "content: url(", "content: url( ", "content: url(http://www.foo.com", "content: url('http://www.foo.com'", "content: foobar(", "content: foobar( ", "content: foobar(http://www.foo.com", "content: foobar('http://www.foo.com'", "color: url(", "color: url( ", "color: url(http://www.foo.com", "color: url('http://www.foo.com'", "background-image: linear-gradient(", "background-image: linear-gradient( ", "background-image: linear-gradient(to", "background-image: linear-gradient(to top", "background-image: linear-gradient(to top left", "background-image: linear-gradient(to top left,", "background-image: repeating-linear-gradient(to top left, red, blue", "background-image: linear-gradient(to top left, red, yellow, blue", "background-image: linear-gradient(to top left, red 1px, yellow 5px, blue 10px", "background-image: linear-gradient(to top left, red, yellow, rgb(0, 0, 255)", "background-image: -moz-linear-gradient(", "background-image: -moz-linear-gradient( ", "background-image: -moz-linear-gradient(red, blue", "background-image: -moz-linear-gradient(red, yellow, blue", "background-image: -moz-linear-gradient(red 1px, yellow 5px, blue 10px", "background-image: -moz-linear-gradient(red, yellow, rgb(0, 0, 255)", "background-image: -moz-linear-gradient(to", "background-image: -moz-linear-gradient(to top", "background-image: -moz-linear-gradient(to top left", "background-image: -moz-linear-gradient(to top left,", "background-image: -moz-repeating-linear-gradient(to top left, red, blue", "background-image: -moz-linear-gradient(to top left, red, yellow, blue", "background-image: -moz-linear-gradient(to top left, red 1px, yellow 5px, blue 10px", "background-image: -moz-linear-gradient(to top left, red, yellow, rgb(0, 0, 255)", "background-image: -moz-repeating-linear-gradient(top left, red, blue", "background-image: -moz-linear-gradient(top left, red, yellow, blue", "background-image: -moz-linear-gradient(top left, red 1px, yellow 5px, blue 10px", "background-image: -moz-linear-gradient(top left, red, yellow, rgb(0, 0, 255)", "background-image: radial-gradient(", "background-image: radial-gradient( ", "background-image: radial-gradient(at", "background-image: radial-gradient(at ", "background-image: radial-gradient(at center", "background-image: radial-gradient(at center,", "background-image: radial-gradient(at center ", "background-image: radial-gradient(closest-corner", "background-image: radial-gradient(farthest-side ", "background-image: radial-gradient(closest-corner ellipse", "background-image: radial-gradient(farthest-side circle ", "background-image: radial-gradient(closest-corner ellipse at", "background-image: radial-gradient(farthest-side circle at ", "background-image: radial-gradient(closest-corner ellipse at center", "background-image: radial-gradient(farthest-side circle at center ", "background-image: radial-gradient(50px", "background-image: radial-gradient(50px,", "background-image: radial-gradient(50px ", "background-image: radial-gradient(50px at", "background-image: radial-gradient(50px at ", "background-image: radial-gradient(50px at center", "background-image: radial-gradient(50px at center ", "background-image: radial-gradient(50px at center,", "background-image: radial-gradient(50px 50px", "background-image: radial-gradient(50px 50px,", "background-image: radial-gradient(50px 50px ", "background-image: radial-gradient(50px 50px at", "background-image: radial-gradient(50px 50px at ", "background-image: radial-gradient(50px 50px at center", "background-image: radial-gradient(50px 50px at center ", "background-image: radial-gradient(50px 50px at center,", "background-image: radial-gradient(50px 50px at center, red, blue", "background-image: radial-gradient(ellipse at", "background-image: radial-gradient(ellipse at ", "background-image: radial-gradient(circle", "background-image: radial-gradient(circle ", "background-image: radial-gradient(circle closest-corner", "background-image: radial-gradient(circle farthest-side ", "background-image: radial-gradient(ellipse closest-corner at center", "background-image: radial-gradient(ellipse farthest-side at center,", "background-image: radial-gradient(circle at center", "background-image: radial-gradient(circle at center,", "background-image: radial-gradient(circle at center ", "background-image: radial-gradient(circle at 50px center", "background-image: radial-gradient(circle at 50px center ", "background-image: radial-gradient(ellipse 50px", "background-image: radial-gradient(ellipse 50px ", "background-image: radial-gradient(ellipse 50px 50px", "background-image: radial-gradient(ellipse 50px 50px,", "background-image: radial-gradient(ellipse 50px 50px ", "background-image: radial-gradient(ellipse 50px 50px at", "background-image: radial-gradient(ellipse 50px 50px at ", "background-image: radial-gradient(ellipse 50px 50px at center", "background-image: radial-gradient(ellipse 50px 50px at center ", "background-image: radial-gradient(ellipse 50px 50px at center,", "background-image: radial-gradient(ellipse 50px 50px at center, red, blue", "background-image: repeating-radial-gradient(50%", "background-image: repeating-radial-gradient(50% ", "background-image: repeating-radial-gradient(50% 50%", "background-image: repeating-radial-gradient(50% 50%,", "background-image: repeating-radial-gradient(50% 50%, red, blue", "background-image: -moz-radial-gradient(", "background-image: -moz-radial-gradient( ", "background-image: -moz-radial-gradient(top left 45deg, red, blue", "background-image: -moz-radial-gradient(cover, red, blue", "background-image: -moz-repeating-radial-gradient(circle, red, blue", "background-image: -moz-radial-gradient(ellipse closest-corner, red, hsl(240, 50%, 50%)", "background-image: -moz-radial-gradient(farthest-side circle, red, blue", "background-image: -moz-image-rect(", "background-image: -moz-image-rect( ", "background-image: -moz-image-rect(url(foo.jpg)", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10 ", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10,", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, ", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10 ", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10,", "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10, ", "color: rgb(", "color: rgb( ", "color: rgb(128, 0", "color: rgb(128, 0, 128", "color: rgb(128, 0, 128, 128", "color: rgba(", "color: rgba( ", "color: rgba(128, 0", "color: rgba(128, 0, 128", "color: rgba(128, 0, 128, 1", "color: rgba(128, 0, 128, 1, 1", "color: hsl(", "color: hsl( ", "color: hsl(240, 50%", "color: hsl(240, 50%, 50%", "color: hsl(240, 50%, 50%, 50%", "color: hsla(", "color: hsla( ", "color: hsla(240, 50%", "color: hsla(240, 50%, 50%", "color: hsla(240, 50%, 50%, 1", "color: hsla(240, 50%, 50%, 1, 1", "content: counter(", "content: counter( ", "content: counter(foo", "content: counter(foo ", "content: counter(foo,", "content: counter(foo, ", "content: counter(foo, upper-roman", "content: counter(foo, upper-roman ", "content: counter(foo, upper-roman,", "content: counter(foo, upper-roman, ", "content: counters(", "content: counters( ", "content: counters(foo, ','", "content: counters(foo, ',' ", "content: counters(foo, ',',", "content: counters(foo, ',', ", "content: counters(foo, ',', upper-roman", "content: counters(foo, ',', upper-roman ", "content: counters(foo, ',', upper-roman,", "content: counters(foo, ',', upper-roman, ", "content: attr(", "content: attr( ", "content: attr(href", "content: attr(href ", "content: attr(html", "content: attr(html ", "content: attr(html|", "content: attr(html| ", "content: attr(html|href", "content: attr(html|href ", "content: attr(|", "content: attr(| ", "content: attr(|href", "content: attr(|href ", "transition-timing-function: cubic-bezier(", "transition-timing-function: cubic-bezier( ", "transition-timing-function: cubic-bezier(0, 0, 1", "transition-timing-function: cubic-bezier(0, 0, 1 ", "transition-timing-function: cubic-bezier(0, 0, 1,", "transition-timing-function: cubic-bezier(0, 0, 1, ", "transition-timing-function: cubic-bezier(0, 0, 1, 1", "transition-timing-function: cubic-bezier(0, 0, 1, 1 ", "transition-timing-function: cubic-bezier(0, 0, 1, 1,", "transition-timing-function: cubic-bezier(0, 0, 1, 1, ", "border-top-width: calc(", "border-top-width: calc( ", "border-top-width: calc(2em", "border-top-width: calc(2em ", "border-top-width: calc(2em +", "border-top-width: calc(2em + ", "border-top-width: calc(2em *", "border-top-width: calc(2em * ", "border-top-width: calc((2em)", "border-top-width: calc((2em) ", ]; var selectors = [ ":not(", ":not( ", ":not(-", ":not(- ", ":not(>", ":not(> ", ":not(div p", ":not(div p ", ":not(div >", ":not(div > ", ]; var textNode = document.createTextNode(""); document.getElementById("style").appendChild(textNode); var cs = getComputedStyle(document.getElementById("display"), ""); for (var i = 0; i < semirules.length; ++i) { var sheet = semirules[i] + "p#display { color: red } ) ; p { color: green; z-index: " + (i + 1) + " }"; textNode.data = sheet; is(cs.color, "rgb(0, 128, 0)", "color for rule '" + semirules[i] + "'"); is(cs.zIndex, String(i + 1), "z-index for rule '" + semirules[i] + "'"); } for (var i = 0; i < declarations.length; ++i) { var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" + "#display { color: green; " + declarations[i] + " x x x x x x x ; color: red; ) ; z-index: " + (i + 1) + " }"; textNode.data = sheet; is(cs.color, "rgb(0, 128, 0)", "color for declaration '" + declarations[i] + "'"); is(cs.zIndex, String(i + 1), "z-index for declaration '" + declarations[i] + "'"); } for (var i = 0; i < selectors.length; ++i) { var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" + "#display { color: green } " + selectors[i] + " x x x x x x x , #display { color: red } #display { color: red } ) , #display { color: red } " + "#display { z-index: " + (i + 1) + " }"; textNode.data = sheet; is(cs.color, "rgb(0, 128, 0)", "color for selector '" + selectors[i] + "'"); is(cs.zIndex, String(i + 1), "z-index for selector '" + selectors[i] + "'"); } </script> </pre> </body> </html>