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