| [email protected] | 4488d3d6 | 2013-02-11 11:00:54 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>CSSValue comparison test</title> |
| 5 | <script type="text/javascript" src="../resources/testharness.js"></script> |
| 6 | <script type="text/javascript" src="../resources/testharnessreport.js"></script> |
| 7 | </head> |
| 8 | <body onload="run()"> |
| 9 | <p>This test verifies that CSSValue objects comparison works correctly.</p> |
| 10 | <div id="test" contenteditable></div> |
| 11 | |
| 12 | <script type="text/javascript"> |
| 13 | setup({ "explicit_done": true }); |
| 14 | |
| 15 | function run() { |
| 16 | var styleElement = document.createElement("style"); |
| 17 | styleElement.type = "text/css"; |
| 18 | var styleTextNode = document.createTextNode(""); |
| 19 | styleElement.appendChild(styleTextNode); |
| 20 | document.getElementsByTagName("head")[0].appendChild(styleElement); |
| 21 | |
| 22 | var div = document.getElementById("test"); |
| 23 | div.focus(); |
| 24 | |
| 25 | function runTest(propertyName, styleSheetPropertyValue, inlineStylePropertyValue, expectedResult) { |
| 26 | styleTextNode.data = "div { " + propertyName + " : " + styleSheetPropertyValue + "; }"; |
| 27 | document.execCommand('insertHTML', false, "<div id=\"insertedDiv\" style=\"" + propertyName + " : " + inlineStylePropertyValue + "; \"></div>"); |
| 28 | var insertedDiv = document.getElementById('insertedDiv'); |
| 29 | var result = expectedResult; |
| 30 | if (propertyName in insertedDiv.style) |
| 31 | result = insertedDiv.style[propertyName] === ""; |
| 32 | insertedDiv.remove(); |
| 33 | return result; |
| 34 | } |
| 35 | |
| [email protected] | 611d055 | 2013-04-22 14:30:01 | [diff] [blame] | 36 | var tests = [ {"width" : ["20%", "2em", "2rem", "20px", "2cm", "20mm", "4in", "20pt", "10pc", "6vw", "6vh", "4vmin", "10vmax", "-webkit-calc(-100px + 100%)"]}, // lengths, calc |
| [email protected] | 4488d3d6 | 2013-02-11 11:00:54 | [diff] [blame] | 37 | {"-webkit-transform" : ["rotate(15deg)", "rotate(1.55rad)", "rotate(200grad)", "rotate(0.5turn)"]}, // angle |
| [email protected] | 0ef957bd | 2015-01-23 01:41:51 | [diff] [blame] | 38 | {"background-image" : ["url(dummy://test.png)", "url(dummy://green.png)"]}, // uri |
| [email protected] | 4488d3d6 | 2013-02-11 11:00:54 | [diff] [blame] | 39 | {"content" : ["counter(a)", "counters(a, '.')"]}, // counter |
| 40 | {"content" : ["attr(a)", "attr(p)"]}, // attr |
| 41 | {"clip" : ["rect(40px, 0, 45px, -5px)", "rect(10px, 5px, 15px, -10px)"]}, // rect |
| 42 | {"border-radius" : ["30px 75px 15px 15px", "164px / 82px", "40px"]}, // quads |
| 43 | {"stop-color" : ["rgb(255,0,0)", "#FF5566"]}, // hex, rgb color |
| 44 | {"-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 |
| 45 | {"-webkit-animation-duration" : ["10s", "100ms"]}, // seconds, milliseconds |
| 46 | {"color" : ["red", "blue"]}, // ident |
| 47 | {"border-image-source" : ["url(resources/greenbox.png)", "url(resources/redbox.png)"]}, // image |
| 48 | {"border-image-slice" : ["1 2 3 4", "2 3 4 5"]}, // border image slice |
| 49 | {"cursor" : ["url(resources/greenbox.png) 0 0, pointer", "url(resources/cursor.png) 1 1, wait"]}, // cursor |
| bugsnash | 44c56e14 | 2015-12-15 05:37:04 | [diff] [blame] | 50 | {"font-style" : ["italic", "oblique"]}, // font |
| drott | f5c3fca | 2016-05-03 16:14:09 | [diff] [blame] | 51 | {"font-variant-ligatures" : ["normal", "discretionary-ligatures"]}, // font |
| 52 | {"font-variant-caps" : ["normal", "small-caps"]}, // font |
| bugsnash | 44c56e14 | 2015-12-15 05:37:04 | [diff] [blame] | 53 | {"font-weight" : ["bold", "bolder"]}, // font |
| 54 | {"font-stretch" : ["semi-condensed", "expanded"]}, // font |
| 55 | {"font-size" : ["12px", "8px"]}, // font |
| 56 | {"line-height" : ["30pz", "16px"]}, // font |
| 57 | {"font-family" : ["arial", "helvetica"]}, // font |
| [email protected] | 0ef957bd | 2015-01-23 01:41:51 | [diff] [blame] | 58 | {"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 |
| 59 | {"background-image" : ["radial-gradient(circle, #ccc, #000)"]}, // gradients |
| 60 | {"background-image" : ["linear-gradient(#000, #234)", "linear-gradient(to top, #000, #234)"]}, // gradients |
| [email protected] | 4488d3d6 | 2013-02-11 11:00:54 | [diff] [blame] | 61 | {"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 |
| 62 | {"-webkit-box-reflect" : ["below 10px", "below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(10, 55, 234, 1)))"]}, // reflect |
| 63 | {"-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 |
| 64 | {"-webkit-transition-timing-function" : ["cubic-bezier(0.25, 0.1, 0.25, 1)", "linear", "steps(3, end)"]}, // timing functions |
| 65 | {"-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 |
| 66 | {"-webkit-line-box-contain" : ["inline-box", "font", "glyphs", "replaced"]}, // line-box-contain |
| 67 | {"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 |
| 68 | {"-webkit-filter" : ["grayscale(100%) sepia(100%)", "sepia(10%) grayscale(50%)"]}, // filter |
| 69 | {"-webkit-dashboard-region" : ["dashboard-region(label circle)", "dashboard-region(label circle 1px 2px 3px 4px) dashboard-region(label rectangle 5px 6px 7px 8px)"]} // dashboard region |
| 70 | ]; |
| 71 | |
| 72 | for (var index in tests) { |
| 73 | var testMap = tests[index]; |
| 74 | for (var key in testMap) { |
| 75 | var testValues = testMap[key]; |
| 76 | |
| 77 | // Tests for equality. |
| 78 | for(var testIndex in testValues) |
| 79 | test(function() {assert_true(runTest(key, testValues[testIndex], testValues[testIndex], true))}, "Two CSSValues \"" + testValues[testIndex] + "\" for property \"" + key + "\" are equal."); |
| 80 | |
| 81 | // Test that comparison of non-equal cssvalues return false. |
| 82 | if (testValues.length > 1) |
| 83 | test(function() {assert_false(runTest(key, testValues[0], testValues[1], false))}, "Two CSSValues \"" + testValues[0] + "\" and \"" + testValues[1] + "\" for property \"" + key + "\" are not equal."); |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | done(); |
| 88 | } |
| 89 | |
| 90 | </script> |
| 91 | </body> |
| 92 | </html> |
