src/third_party/WebKit/LayoutTests/fast/shapes/parsing/parsing-test-utils.js

   1 // Valid values for both shape-inside and shape-outside. Two values are specified when the shape property value
   2 // differs from the specified value. Three values are specified when the computed shape property value differs
   3 // from the specified value.
   4 // eg: "specified value/CSS Text value/computed style value"
   5 // or: ["specified value", "CSS Text value/computed style value"]
   6 // or: ["specified value", "CSS Text value", "Computed style value"]
   7 var validShapeValues = [
   8     "none",
   9     ["rectangle(10px, 20px, 30px, 40px)", "rectangle(10px, 20px, 30px, 40px)", "rectangle(10px, 20px, 30px, 40px, 0px, 0px)"],
  10     ["rectangle(10px, 20px, 30px, 40px, 5px)", "rectangle(10px, 20px, 30px, 40px, 5px)", "rectangle(10px, 20px, 30px, 40px, 5px, 5px)"],
  11     "rectangle(10px, 20px, 30px, 40px, 5px, 10px)",
  12
  13     ["inset-rectangle(10px, 20px, 30px, 40px)", "inset-rectangle(10px, 20px, 30px, 40px)", "inset-rectangle(10px, 20px, 30px, 40px, 0px, 0px)"],
  14     ["inset-rectangle(10px, 20px, 30px, 40px, 5px)", "inset-rectangle(10px, 20px, 30px, 40px, 5px)", "inset-rectangle(10px, 20px, 30px, 40px, 5px, 5px)"],
  15     "inset-rectangle(10px, 20px, 30px, 40px, 5px, 10px)",
  16
  17     ["inset(10px)", "inset(10px 10px 10px 10px)", "inset(10px 10px 10px 10px round 0px 0px 0px 0px / 0px 0px 0px 0px)"],
  18     ["inset(10px 9px)", "inset(10px 9px 10px 9px)", "inset(10px 9px 10px 9px round 0px 0px 0px 0px / 0px 0px 0px 0px)"],
  19     ["inset(10px 9px 8px)", "inset(10px 9px 8px 9px)", "inset(10px 9px 8px 9px round 0px 0px 0px 0px / 0px 0px 0px 0px)"],
  20     ["inset(10px 20px 30px 40px)", "inset(10px 20px 30px 40px)", "inset(10px 20px 30px 40px round 0px 0px 0px 0px / 0px 0px 0px 0px)"],
  21     ["inset(10px round 9px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 9px 9px 9px 9px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 9px 9px 9px 9px)"],
  22     ["inset(10px round 9px / 9px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 9px 9px 9px 9px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 9px 9px 9px 9px)"],
  23     ["inset(10px round 9px / 8px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 8px 8px 8px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 8px 8px 8px)"],
  24     ["inset(10px round 9px / 8px 7px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 8px 7px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 8px 7px)"],
  25     ["inset(10px round 9px / 8px 7px 6px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 6px 7px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 6px 7px)"],
  26     ["inset(10px round 9px / 8px 7px 6px 5px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 6px 5px)", "inset(10px 10px 10px 10px round 9px 9px 9px 9px / 8px 7px 6px 5px)"],
  27     ["inset(10px round 9px 8px / 7px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 7px 7px 7px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 7px 7px 7px)"],
  28     ["inset(10px round 9px 8px / 7px 6px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 7px 6px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 7px 6px)"],
  29     ["inset(10px round 9px 8px / 7px 6px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 7px 6px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 7px 6px)"],
  30     ["inset(10px round 9px 8px / 7px 6px 5px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 5px 6px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 5px 6px)"],
  31     ["inset(10px round 9px 8px / 7px 6px 5px 4px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 5px 4px)", "inset(10px 10px 10px 10px round 9px 8px 9px 8px / 7px 6px 5px 4px)"],
  32     ["inset(10px round 9px 8px 7px / 6px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 6px 6px 6px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 6px 6px 6px)"],
  33     ["inset(10px round 9px 8px 7px / 6px 5px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 6px 5px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 6px 5px)"],
  34     ["inset(10px round 9px 8px 7px / 6px 5px 4px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 4px 5px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 4px 5px)"],
  35     ["inset(10px round 9px 8px 7px / 6px 5px 4px 3px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 4px 3px)", "inset(10px 10px 10px 10px round 9px 8px 7px 8px / 6px 5px 4px 3px)"],
  36     ["inset(10px round 9px 8px 7px 6px / 5px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 5px 5px 5px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 5px 5px 5px)"],
  37     ["inset(10px round 9px 8px 7px 6px / 5px 4px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 5px 4px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 5px 4px)"],
  38     ["inset(10px round 9px 8px 7px 6px / 5px 4px 3px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 3px 4px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 3px 4px)"],
  39     ["inset(10px round 9px 8px 7px 6px / 5px 4px 3px 2px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 3px 2px)", "inset(10px 10px 10px 10px round 9px 8px 7px 6px / 5px 4px 3px 2px)"],
  40     ["inset(10px 20px 30px 40px round 5px 6px)", "inset(10px 20px 30px 40px round 5px 6px 5px 6px / 5px 6px 5px 6px)", "inset(10px 20px 30px 40px round 5px 6px 5px 6px / 5px 6px 5px 6px)"],
  41     "inset(10px 20px 30px 40px round 5px 6px 7px 8px / 50px 60px 70px 80px)",
  42
  43     "circle(10px, 20px, 30px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
  44
  45     ["circle()", "circle()", "circle(closest-side at 50% 50%)"],
  46     ["circle(farthest-side)", "circle(farthest-side)", "circle(farthest-side at 50% 50%)"],
  47     ["circle(closest-side)", "circle(closest-side)", "circle(closest-side at 50% 50%)"],
  48     ["circle(10px)", "circle(10px)", "circle(10px at 50% 50%)"],
  49     ["circle(10px at 10px)", "circle(10px at 10px 50%)"],
  50     "circle(10px at 10px 10px)",
  51     ["circle(at 10px)", "circle(at 10px 50%)", "circle(closest-side at 10px 50%)"],
  52     ["circle(at 10px 10px)", "circle(at 10px 10px)", "circle(closest-side at 10px 10px)"],
  53     ["circle(at top left)", "circle(at 0% 0%)", "circle(closest-side at 0% 0%)"],
  54     ["circle(at right bottom)", "circle(at 100% 100%)", "circle(closest-side at 100% 100%)"],
  55     ["circle(10px at left top 10px)", "circle(10px at left 0% top 10px)"],
  56     ["circle(10px at top 10px left 10px)", "circle(10px at left 10px top 10px)"],
  57     ["circle(10px at right 10px bottom 10px)", "circle(10px at right 10px bottom 10px)"],
  58
  59     "ellipse(10px, 20px, 30px, 40px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
  60
  61     ["ellipse()", "ellipse()", "ellipse(closest-side closest-side at 50% 50%)"],
  62     ["ellipse(10px)", "ellipse(10px)", "ellipse(10px closest-side at 50% 50%)"],
  63     ["ellipse(10px 20px)", "ellipse(10px 20px)", "ellipse(10px 20px at 50% 50%)"],
  64     ["ellipse(10px at 10px)", "ellipse(10px at 10px 50%)", "ellipse(10px closest-side at 10px 50%)"],
  65     ["ellipse(10px 20px at 10px)", "ellipse(10px 20px at 10px 50%)"],
  66     ["ellipse(10px at 10px 10px)", "ellipse(10px at 10px 10px)", "ellipse(10px closest-side at 10px 10px)"],
  67     ["ellipse(at 10px)", "ellipse(at 10px 50%)", "ellipse(closest-side closest-side at 10px 50%)"],
  68     ["ellipse(at 10px 10px)", "ellipse(at 10px 10px)", "ellipse(closest-side closest-side at 10px 10px)"],
  69     ["ellipse(at top left)", "ellipse(at 0% 0%)", "ellipse(closest-side closest-side at 0% 0%)"],
  70     ["ellipse(at right bottom)", "ellipse(at 100% 100%)", "ellipse(closest-side closest-side at 100% 100%)"],
  71     ["ellipse(10px at left top 10px)", "ellipse(10px at left 0% top 10px)", "ellipse(10px closest-side at left 0% top 10px)"],
  72     ["ellipse(10px at top 10px left 10px)", "ellipse(10px at left 10px top 10px)", "ellipse(10px closest-side at left 10px top 10px)"],
  73     ["ellipse(10px at right 10px bottom 10px)", "ellipse(10px at right 10px bottom 10px)", "ellipse(10px closest-side at right 10px bottom 10px)"],
  74     ["ellipse(10px 20px at left top 10px)", "ellipse(10px 20px at left 0% top 10px)"],
  75     ["ellipse(10px 20px at top 10px left 10px)", "ellipse(10px 20px at left 10px top 10px)"],
  76     ["ellipse(10px 20px at right 10px bottom 10px)", "ellipse(10px 20px at right 10px bottom 10px)"],
  77
  78     ["polygon(10px 20px, 30px 40px, 40px 50px)", "polygon(nonzero, 10px 20px, 30px 40px, 40px 50px)"],
  79     ["polygon(evenodd, 10px 20px, 30px 40px, 40px 50px)", "polygon(evenodd, 10px 20px, 30px 40px, 40px 50px)"],
  80     ["polygon(nonzero, 10px 20px, 30px 40px, 40px 50px)", "polygon(nonzero, 10px 20px, 30px 40px, 40px 50px)"],
  81
  82     "content-box",
  83     "padding-box",
  84     "border-box",
  85     "margin-box",
  86
  87     "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) content-box",
  88     "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) padding-box",
  89     "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) border-box",
  90     "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) margin-box",
  91
  92     ["content-box polygon(nonzero, 10px 10px, 20px 20px, 30px 30px)", "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) content-box"],
  93     ["padding-box polygon(nonzero, 10px 10px, 20px 20px, 30px 30px)", "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) padding-box"],
  94     ["border-box polygon(nonzero, 10px 10px, 20px 20px, 30px 30px)", "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) border-box"],
  95     ["margin-box polygon(nonzero, 10px 10px, 20px 20px, 30px 30px)", "polygon(nonzero, 10px 10px, 20px 20px, 30px 30px) margin-box"]
  96 ];
  97
  98 // Invalid values for both shape-inside and shape-outside. When an invalid shape value is specified, the
  99 // shape property's computed value is the same as its default.
 100 var invalidShapeValues = [
 101     "calc()",
 102     "auto",
 103
 104     "rectangle()",
 105     "rectangle(10px)",
 106     "rectangle(10px, 10px)",
 107     "rectangle(10px, 20px, 30px)",
 108     "rectangle(10px 20px 30px 40px)",
 109     "rectangle(10px, 20px, 30px, 40px, 50px, 60px, 70px)",
 110
 111     "inset-rectangle()",
 112     "inset-rectangle(10px)",
 113     "inset-rectangle(10px, 10px)",
 114     "inset-rectangle(10px, 20px, 30px)",
 115     "inset-rectangle(10px 20px 30px 40px)",
 116     "inset-rectangle(10px, 20px, 30px, 40px, 50px, 60px, 70px)",
 117
 118     "inset()",
 119     "inset(10px, 10px)",
 120     "inset(10px 20px, 30px)",
 121     "inset(10px, 20px 30px 40px)",
 122     "inset(10px 20px 30px 40px 50px 60px)",
 123     "inset(round)",
 124     "inset(round 10px)",
 125     "inset(10px round)",
 126     "inset(10px round 10px /)",
 127     "inset(10px round 20px 30px 40px 50px 60px)",
 128     "inset(10px round /)",
 129     "inset(10px round / 10px)",
 130     "inset(/)",
 131     "inset(/ 10px)",
 132     "inset(round /)",
 133
 134     "circle(10px, 20px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 135     "circle(10px 20px 30px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 136     "circle(10px, 20px, 30px, 40px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 137
 138     "circle(10px 20px)",
 139     "circle(10px at 10px 10px 10px)",
 140     "circle(10px at 10px 10px at center)",
 141     "circle(10px at center center 10px)",
 142     "circle(at 10px 10px 10px)",
 143     "circle(at 10px 10px at center)",
 144     "circle(at center center 10px)",
 145
 146     "ellipse(10px, 20px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 147     "ellipse(10px, 20px, 30px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 148     "ellipse(10px 20px 30px 40px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
 149
 150     "ellipse(10px 20px 30px)",
 151     "ellipse(10px at 10px 10px 10px)",
 152     "ellipse(10px at 10px 10px at center)",
 153     "ellipse(10px at center center 10px)",
 154     "ellipse(10px 20px 30px at center center 10px)",
 155     "ellipse(at 10px 10px 10px)",
 156     "ellipse(at 10px 10px at center)",
 157     "ellipse(at center center 10px)",
 158
 159     "polygon()",
 160     "polygon(evenodd 10px 20px, 30px 40px, 40px 50px)",
 161     "polygon(nonzero 10px 20px, 30px 40px, 40px 50px)",
 162     "polygon(nonzero)",
 163     "polygon(evenodd)",
 164     "polygon(10px)",
 165     "polygon(nonzero,10px)",
 166     "polygon(evenodd,12px)",
 167     "polygon(10px, 20px, 30px, 40px, 40px, 50px)",
 168
 169     "content-box content-box",
 170     "polygon(nonzero, 0 0 ,10px 10px, 10px 0) polygon(nonzero, 0 0, 10px 10px, 10px 0)",
 171     "none content-box",
 172     "content-box none",
 173     "polygon(none) content-box",
 174     "content-box polygon(none)",
 175     "circle(50px) none",
 176     "none circle(50px)",
 177     "url('shape.svg') content-box",
 178     "url('shape.svg') polygon(nonzero, 0 0, 10px 10px, 10px 0)"
 179 ];
 180
 181 // Valid length values for shape-margin and shape-padding.
 182 var validShapeLengths = [
 183     "1.5ex",
 184     "2em",
 185     "2.5in",
 186     "3cm",
 187     "3.5mm",
 188     "4pt",
 189     "4.5pc",
 190     "5px"
 191 ];
 192
 193 // Invalid length values for shape-margin and shape-padding.
 194 var invalidShapeLengths = [
 195     "-5px",
 196     "none",
 197     "120%",
 198     "\'string\'"
 199 ];
 200
 201 function getCSSText(property, value)
 202 {
 203     var element = document.createElement("div");
 204     element.style.cssText = property + ": " + value;
 205     return element.style[property];
 206 }
 207
 208 function getComputedStyleValue(property, value)
 209 {
 210     var element = document.createElement("div");
 211     document.body.appendChild(element);
 212     element.style.setProperty(property, value);
 213     var computedValue = getComputedStyle(element).getPropertyValue(property);
 214     document.body.removeChild(element);
 215     return computedValue;
 216 }
 217
 218 function getParentAndChildComputedStyles(property, parentValue, childValue)
 219 {
 220     var parentElement = document.createElement("div");
 221     document.body.appendChild(parentElement);
 222     parentElement.style.setProperty(property, parentValue);
 223     var childElement = document.createElement("div");
 224     parentElement.appendChild(childElement);
 225     childElement.style.setProperty(property, childValue);
 226     var parentComputedValue = getComputedStyle(parentElement).getPropertyValue(property);
 227     var childComputedValue = getComputedStyle(childElement).getPropertyValue(property);
 228     parentElement.removeChild(childElement);
 229     document.body.removeChild(parentElement);
 230     return {parent: parentComputedValue, child: childComputedValue};
 231 }
 232
 233 function getParentAndChildComputedStylesString(property, parentValue, childValue)
 234 {
 235     var styles = getParentAndChildComputedStyles(property, parentValue, childValue);
 236     return "parent: " + styles.parent + ", child: " + styles.child;
 237 }
 238
 239 function getChildComputedStyle(property, parentValue, childValue)
 240 {
 241     var styles = getParentAndChildComputedStyles(property, parentValue, childValue);
 242     return styles.child;
 243 }
 244
 245 function testShapeSpecifiedProperty(property, value, expectedValue)
 246 {
 247     shouldBeEqualToString('getCSSText("' + property + '", "' + value + '")', expectedValue);
 248 }
 249
 250 function testShapeComputedProperty(property, value, expectedValue)
 251 {
 252     shouldBeEqualToString('getComputedStyleValue("' + property + '", "' + value + '")', expectedValue);
 253 }
 254
 255 function testNotInheritedShapeChildProperty(property, parentValue, childValue, expectedChildValue)
 256 {
 257     shouldBeEqualToString('getChildComputedStyle("' + property + '", "' + parentValue + '", "' + childValue + '")', expectedChildValue);
 258 }
 259
 260 // Need to remove the base URL to avoid having local paths in the expected results.
 261 function removeBaseURL(src) {
 262     var urlRegexp = /url\(([^\)]*)\)/g;
 263     return src.replace(urlRegexp, function(match, url) {
 264         return "url(" + url.substr(url.lastIndexOf("/") + 1) + ")";
 265     });
 266 }
 267
 268 function testLocalURLShapeProperty(property, value, expected)
 269 {
 270     shouldBeEqualToString('removeBaseURL(getCSSText("' + property + '", "' + value + '"))', expected);
 271     shouldBeEqualToString('removeBaseURL(getComputedStyleValue("' + property + '", "' + value + '"))', expected);
 272 }
 273
 274 function testShapePropertyParsingFailure(property, value, defaultComputedStyle)
 275 {
 276     shouldBeEqualToString('getCSSText("' + property + '", "' + value + '")', '');
 277     shouldBeEqualToString('getComputedStyleValue("' + property + '", "' + value + '")', defaultComputedStyle);
 278 }
 279
 280 function testNotInheritedShapeProperty(property, parentValue, childValue, expectedValue)
 281 {
 282     shouldBeEqualToString('getParentAndChildComputedStylesString("' + property + '", "' + parentValue + '", "' + childValue + '")', expectedValue);
 283 }
 284
 285 function applyToEachArglist(testFunction, arglists)
 286 {
 287     arglists.forEach(function(arglist, i, a) {testFunction.apply(null, arglist);});
 288 }