2013-02-11 11:00:54 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>CSSValue comparison test</title>
|
|
|
|
|
<script type="text/javascript" src="../resources/testharness.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../resources/testharnessreport.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="run()">
|
|
|
|
|
<p>This test verifies that CSSValue objects comparison works correctly.</p>
|
|
|
|
|
<div id="test" contenteditable></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
setup({ "explicit_done": true });
|
|
|
|
|
|
|
|
|
|
function run() {
|
|
|
|
|
var styleElement = document.createElement("style");
|
|
|
|
|
styleElement.type = "text/css";
|
|
|
|
|
var styleTextNode = document.createTextNode("");
|
|
|
|
|
styleElement.appendChild(styleTextNode);
|
|
|
|
|
document.getElementsByTagName("head")[0].appendChild(styleElement);
|
|
|
|
|
|
|
|
|
|
var div = document.getElementById("test");
|
|
|
|
|
div.focus();
|
|
|
|
|
|
|
|
|
|
function runTest(propertyName, styleSheetPropertyValue, inlineStylePropertyValue, expectedResult) {
|
|
|
|
|
styleTextNode.data = "div { " + propertyName + " : " + styleSheetPropertyValue + "; }";
|
|
|
|
|
document.execCommand('insertHTML', false, "<div id=\"insertedDiv\" style=\"" + propertyName + " : " + inlineStylePropertyValue + "; \"></div>");
|
|
|
|
|
var insertedDiv = document.getElementById('insertedDiv');
|
|
|
|
|
var result = expectedResult;
|
|
|
|
|
if (propertyName in insertedDiv.style)
|
|
|
|
|
result = insertedDiv.style[propertyName] === "";
|
|
|
|
|
insertedDiv.remove();
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tests = [ {"width" : ["20%", "2em", "2rem", "20px", "2cm", "20mm", "4in", "20pt", "10pc", "6vw", "6vh", "4vmin", "-webkit-calc(-100px + 100%)"]}, // lengths, calc
|
|
|
|
|
{"-webkit-transform" : ["rotate(15deg)", "rotate(1.55rad)", "rotate(200grad)", "rotate(0.5turn)"]}, // angle
|
2016-05-03 02:25:31 +00:00
|
|
|
{"background-image" : ["url(dummy://test.png)", "url(dummy://green.png)"]}, // uri
|
2013-02-11 11:00:54 +00:00
|
|
|
{"font-weight" : ["bold", "inherit"]}, // ident
|
|
|
|
|
{"content" : ["counter(a)", "counters(a, '.')"]}, // counter
|
|
|
|
|
{"content" : ["attr(a)", "attr(p)"]}, // attr
|
|
|
|
|
{"clip" : ["rect(40px, 0, 45px, -5px)", "rect(10px, 5px, 15px, -10px)"]}, // rect
|
|
|
|
|
{"border-radius" : ["30px 75px 15px 15px", "164px / 82px", "40px"]}, // quads
|
|
|
|
|
{"stop-color" : ["rgb(255,0,0)", "#FF5566"]}, // hex, rgb color
|
|
|
|
|
{"-webkit-clip-path" : ["polygon(evenodd, 10px 75px, 180px 180px, 100px 10px, 10px 180px, 180px 75px, 10px 75px)", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)"]}, // shape value
|
|
|
|
|
{"-webkit-animation-duration" : ["10s", "100ms"]}, // seconds, milliseconds
|
|
|
|
|
{"color" : ["red", "blue"]}, // ident
|
|
|
|
|
{"border-image-source" : ["url(resources/greenbox.png)", "url(resources/redbox.png)"]}, // image
|
|
|
|
|
{"border-image-slice" : ["1 2 3 4", "2 3 4 5"]}, // border image slice
|
|
|
|
|
{"cursor" : ["url(resources/greenbox.png) 0 0, pointer", "url(resources/cursor.png) 1 1, wait"]}, // cursor
|
|
|
|
|
{"font" : ["italic bold 12px/30px arial", "italic bold 8px/16px helvetica"]}, // font
|
2016-05-03 02:25:31 +00:00
|
|
|
{"background-image" : ["-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))", "-webkit-gradient(radial, 45 45, 0, 52 50, 0, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))"]}, // gradients
|
|
|
|
|
{"background-image" : ["radial-gradient(circle, #ccc, #000)"]}, // gradients
|
|
|
|
|
{"background-image" : ["linear-gradient(#000, #234)", "linear-gradient(to top, #000, #234)"]}, // gradients
|
2013-02-11 11:00:54 +00:00
|
|
|
{"background-image" : ["-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "-webkit-cross-fade(url(dummy://background.png), url(dummy://foreground.png), 80%)"]}, // crossfade
|
|
|
|
|
{"-webkit-box-reflect" : ["below 10px", "below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(10, 55, 234, 1)))"]}, // reflect
|
|
|
|
|
{"-webkit-box-shadow" : ["0 -20px 10px red, 0 20px 10px blue", "0 20px 10px blue", "5px 5px 5px rgba(0, 0, 0, 0.3)"]}, // shadow
|
|
|
|
|
{"-webkit-transition-timing-function" : ["cubic-bezier(0.25, 0.1, 0.25, 1)", "linear", "steps(3, end)"]}, // timing functions
|
|
|
|
|
{"-webkit-transform" : ["rotate(30deg)", "translate(50px,50px)", "scale(2,4)", "skew(30deg,20deg)", "matrix(0.4,0.5,-0.5,0.4,0,0)"]}, // transforms
|
|
|
|
|
{"-webkit-line-box-contain" : ["inline-box", "font", "glyphs", "replaced"]}, // line-box-contain
|
|
|
|
|
{"background-image" : ["-webkit-image-set(url(dummy://test.png) 1x, url(dummy://test.png) 2x)", "-webkit-image-set(url(dummy://small.png) 2x, url(dummy://big.png) 3x)"]}, // image set
|
2016-07-02 00:22:15 +00:00
|
|
|
{"background-image" : ["image-set(url(dummy://test.png) 1x, url(dummy://test.png) 2x)", "image-set(url(dummy://small.png) 2x, url(dummy://big.png) 3x)"]}, // image set
|
2019-06-10 22:16:37 +00:00
|
|
|
{"-webkit-filter" : ["grayscale(100%) sepia(100%)", "sepia(10%) grayscale(50%)"]} // filter
|
2013-02-11 11:00:54 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (var index in tests) {
|
|
|
|
|
var testMap = tests[index];
|
|
|
|
|
for (var key in testMap) {
|
|
|
|
|
var testValues = testMap[key];
|
|
|
|
|
|
|
|
|
|
// Tests for equality.
|
|
|
|
|
for(var testIndex in testValues)
|
|
|
|
|
test(function() {assert_true(runTest(key, testValues[testIndex], testValues[testIndex], true))}, "Two CSSValues \"" + testValues[testIndex] + "\" for property \"" + key + "\" are equal.");
|
|
|
|
|
|
|
|
|
|
// Test that comparison of non-equal cssvalues return false.
|
|
|
|
|
if (testValues.length > 1)
|
|
|
|
|
test(function() {assert_false(runTest(key, testValues[0], testValues[1], false))}, "Two CSSValues \"" + testValues[0] + "\" and \"" + testValues[1] + "\" for property \"" + key + "\" are not equal.");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
done();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
