cssvalue-comparison.html 5.7 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<!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
                  {"background" : ["url(dummy://test.png)", "url(dummy://green.png)"]}, // uri
                  {"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
                  {"background" : ["-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
53 54
                  {"background" : ["radial-gradient(circle, #ccc, #000)"]}, // gradients
                  {"background" : ["linear-gradient(#000, #234)", "linear-gradient(to top, #000, #234)"]}, // gradients
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
                  {"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
                  {"-webkit-filter" : ["grayscale(100%) sepia(100%)", "sepia(10%) grayscale(50%)"]}, // filter
                  {"-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
                ];

   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>