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