third_party/WebKit/LayoutTests/fast/masking/parsing-mask.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 * { font-size: 16px; }
   5 div { font-size: 8px; }
   6 </style>
   7 <body>
   8 <script src="../../resources/js-test.js"></script>
   9 <script>
  10 description('Test that clip-path shapes accept different length units');
  11
  12 function computedStyle(property, value) {
  13     var div = document.createElement("div");
  14     document.body.appendChild(div);
  15     div.style.setProperty(property, value);
  16     var computedValue = getComputedStyle(div).getPropertyValue(property);
  17     document.body.removeChild(div);
  18     return computedValue;
  19 }
  20
  21 function innerStyle(property, value) {
  22     var div = document.createElement("div");
  23     div.style.setProperty(property, value);
  24     return div.style.getPropertyValue(property);
  25 }
  26
  27 function testComputed(property, value, expected) {
  28     shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
  29 }
  30
  31 function testInner(property, value, expected) {
  32     if (expected === null)
  33         shouldBeNull('innerStyle("' + property + '", "' + value + '")');
  34     else
  35         shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
  36 }
  37
  38 function negativeTest(property, value) {
  39     testInner(property, value, "");
  40     // FIXME: Computed style not yet implemented.
  41     // testComputed(property, value, 'none');
  42 }
  43
  44 // test mask-image
  45 testInner("-webkit-mask", "none", "none");
  46 testInner("-webkit-mask", "none, none", "none, none");
  47 testInner("-webkit-mask", "none, none, none", "none, none, none");
  48 testInner("-webkit-mask", "url(file:///image.png), none", "url(file:///image.png), none");
  49 testInner("-webkit-mask", "none, url(file:///image.png)", "none, url(file:///image.png)");
  50
  51
  52 // test mask-position
  53 testInner("-webkit-mask", "top left", "0% 0%");
  54 testInner("-webkit-mask", "bottom right", "100% 100%");
  55 testInner("-webkit-mask", "left bottom", "0% 100%");
  56 testInner("-webkit-mask", "right top", "100% 0%");
  57 testInner("-webkit-mask", "center", "50% 50%");
  58 testInner("-webkit-mask", "none top", "none 50% 0%");
  59 testInner("-webkit-mask", "none bottom", "none 50% 100%");
  60 testInner("-webkit-mask", "none right", "none 100% 50%");
  61 testInner("-webkit-mask", "none top right", "none 100% 0%");
  62 testInner("-webkit-mask", "none bottom left", "none 0% 100%");
  63 testInner("-webkit-mask", "none right", "none 100% 50%");
  64 testInner("-webkit-mask", "none left", "none 0% 50%");
  65 testInner("-webkit-mask", "center 50%", "50% 50%");
  66 testInner("-webkit-mask", "50px 50%", "50px 50%");
  67 testInner("-webkit-mask", "center left", "0% 50%");
  68 testInner("-webkit-mask", "top center", "50% 0%");
  69 testInner("-webkit-mask", "left 10px top 15px", "left 10px top 15px");
  70 testInner("-webkit-mask", "left 10% top 30%", "left 10% top 30%");
  71 testInner("-webkit-mask", "right top 15px", "right 0% top 15px");
  72 testInner("-webkit-mask", "left 10px center", "left 10px top 50%");
  73 testInner("-webkit-mask", "center top 20px", "left 50% top 20px");
  74 testInner("-webkit-mask", "center left 30px", "left 30px top 50%");
  75 testInner("-webkit-mask", "left 20% top", "left 20% top 0%");
  76 testInner("-webkit-mask", "center center", "50% 50%");
  77
  78 testInner("-webkit-mask-position", "left 10px top 15px", "left 10px top 15px");
  79 testInner("-webkit-mask-position", "left 10% top 30%", "left 10% top 30%");
  80 testInner("-webkit-mask-position", "right top 15px", "right 0% top 15px");
  81 testInner("-webkit-mask-position", "left 10px center", "left 10px top 50%");
  82 testInner("-webkit-mask-position", "center top 20px", "left 50% top 20px");
  83 testInner("-webkit-mask-position", "center left 30px", "left 30px top 50%");
  84 testInner("-webkit-mask-position", "left 20% top", "left 20% top 0%");
  85
  86 // test mask-source-type
  87 testInner("mask-source-type", "alpha", "alpha");
  88 testInner("mask-source-type", "luminance", "luminance");
  89 testInner("mask-source-type", "auto", "auto");
  90 testComputed("mask-source-type", "alpha", "alpha");
  91 testComputed("mask-source-type", "auto", "alpha");
  92 testComputed("mask-source-type", "luminance", "luminance");
  93 testComputed("mask-source-type", "", "alpha");
  94
  95 // test mask-repeat
  96 testInner("-webkit-mask", "repeat-x", "repeat-x");
  97 testInner("-webkit-mask", "repeat-y", "repeat-y");
  98 testInner("-webkit-mask", "repeat", "repeat");
  99 testInner("-webkit-mask", "space", "space");
 100 testInner("-webkit-mask", "no-repeat", "no-repeat");
 101 testInner("-webkit-mask", "repeat space", "repeat space");
 102 testInner("-webkit-mask", "repeat round", "repeat round");
 103 testInner("-webkit-mask", "repeat no-repeat", "repeat no-repeat");
 104 testInner("-webkit-mask", "repeat space, repeat-x", "repeat space, repeat-x");
 105 testInner("-webkit-mask", "repeat none", "none repeat");
 106 testInner("-webkit-mask", "none repeat", "none repeat");
 107
 108 // test mask-origin / mask-clip
 109 testInner("-webkit-mask", "padding-box", "padding-box padding-box");
 110 testInner("-webkit-mask", "border-box", "border-box border-box");
 111 testInner("-webkit-mask", "content-box", "content-box content-box");
 112 testInner("-webkit-mask", "padding-box none", "none padding-box padding-box");
 113 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box");
 114 testInner("-webkit-mask", "padding-box content-box", "padding-box content-box");
 115 testInner("-webkit-mask", "content-box content-box", "content-box content-box");
 116 testInner("-webkit-mask", "padding-box border-box", "padding-box border-box");
 117 testInner("-webkit-mask", "padding-box border-box none", "none padding-box border-box");
 118 testInner("-webkit-mask", "none padding-box border-box", "none padding-box border-box");
 119
 120 // test mask-size
 121 testInner("-webkit-mask", "none left top / auto", "none 0% 0% / auto");
 122 testInner("-webkit-mask", "none left top / auto auto", "none 0% 0% / auto");
 123 testInner("-webkit-mask", "none left top / 100%", "none 0% 0% / 100%");
 124 testInner("-webkit-mask", "none left top / 100% 100%", "none 0% 0% / 100% 100%");
 125 testInner("-webkit-mask", "none left top / 0%", "none 0% 0% / 0%");
 126 testInner("-webkit-mask", "none left top / auto 0%", "none 0% 0% / auto 0%");
 127 testInner("-webkit-mask", "none left top / cover", "none 0% 0% / cover");
 128 testInner("-webkit-mask", "none left top / contain", "none 0% 0% / contain");
 129 testInner("-webkit-mask", "none left 20px top 10px / contain", "none left 20px top 10px / contain");
 130 testInner("-webkit-mask", "none left 20px top / contain", "none left 20px top 0% / contain");
 131
 132 // combinations
 133 testInner("-webkit-mask", "none padding-box content-box", "none padding-box content-box");
 134 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box");
 135 testInner("-webkit-mask", "none top", "none 50% 0%");
 136 testInner("-webkit-mask", "none center right 20px", "none right 20px top 50%");
 137 testInner("-webkit-mask", "none border-box left top", "none 0% 0% border-box border-box");
 138 testInner("-webkit-mask", "none border-box left top 20px", "none left 0% top 20px border-box border-box");
 139 testInner("-webkit-mask", "none border-box content-box left top repeat-x", "none 0% 0% repeat-x border-box content-box");
 140 testInner("-webkit-mask", "none border-box content-box left top / auto repeat-x", "none 0% 0% / auto repeat-x border-box content-box");
 141 testInner("-webkit-mask", "none border-box content-box right 0px center / auto repeat-x", "none right 0px top 50% / auto repeat-x border-box content-box");
 142
 143 // FIXME: Computed style not yet implemented.
 144 // testComputed("-webkit-mask", "", "");
 145 // https://bugs.webkit.org/show_bug.cgi?id=103021
 146
 147 // negative tests
 148 negativeTest("-webkit-mask", "top none left");
 149 negativeTest("-webkit-mask", "right none bottom");
 150 negativeTest("-webkit-mask", "right right");
 151 negativeTest("-webkit-mask", "left left");
 152 negativeTest("-webkit-mask", "top top");
 153 negativeTest("-webkit-mask", "bottom bottom");
 154 negativeTest("-webkit-mask", "50% none 50%");
 155 negativeTest("-webkit-mask", "repeat-x repeat-x");
 156 negativeTest("-webkit-mask", "space repeat-y");
 157 negativeTest("-webkit-mask", "repeat space space");
 158 negativeTest("-webkit-mask", "padding-box border-box content-box");
 159 negativeTest("-webkit-mask", "none / auto");
 160 negativeTest("-webkit-mask", "none repeat-x / auto");
 161 negativeTest("-webkit-mask", "none border-box / auto");
 162 negativeTest("-webkit-mask", "none top left / cover 100%");
 163 negativeTest("-webkit-mask", "scroll");
 164 negativeTest("-webkit-mask", "fixed");
 165 negativeTest("-webkit-mask", "local");
 166 negativeTest("-webkit-mask", "space scroll");
 167 negativeTest("-webkit-mask", "none scroll");
 168 negativeTest("-webkit-mask", "none top left / auto repeat-x scroll border-box border-box");
 169 negativeTest("-webkit-mask", "right top left");
 170 negativeTest("-webkit-mask", "center left center");
 171 negativeTest("-webkit-mask", "center top center");
 172 negativeTest("-webkit-mask", "center right bottom");
 173 negativeTest("-webkit-mask", "top solid bottom");
 174 negativeTest("-webkit-mask", "none top left right center top / auto repeat-x scroll border-box border-box");
 175 negativeTest("-webkit-mask", "none center center 20px / auto repeat-x scroll border-box border-box");
 176 negativeTest("-webkit-mask", "none top 20px right 30px center / auto repeat-x scroll border-box border-box");
 177 negativeTest("-webkit-mask", "none top 20px top 30px / auto repeat-x scroll border-box border-box");
 178 negativeTest("-webkit-mask", "none top 20px bottom / auto repeat-x scroll border-box border-box");
 179
 180 negativeTest("mask-source-type", "rubbish");
 181 negativeTest("mask-source-type", "");
 182 negativeTest("mask-source-type", "center");
 183 negativeTest("mask-source-type", "repeat");
 184
 185 </script>
 186 </body>
 187 </html>