third_party/WebKit/LayoutTests/css3/supports.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script src="../resources/js-test.js"></script>
   5 <style>
   6     .test {
   7         content: "UNTOUCHED";
   8     }
   9
  10     @supports (display: none) {
  11         #t0 { content: "APPLIED" }
  12     }
  13
  14     @supports (display: deadbeef) {
  15         #t1 { content: "FAIL" }
  16     }
  17
  18     /* Negation */
  19     @supports not (display: deadbeef) {
  20         #t2 { content: "APPLIED" }
  21     }
  22
  23     @supports not (display: none) {
  24         #t3 { content: "FAIL" }
  25     }
  26
  27     @supports not (not (display: none)) {
  28         #t4 { content: "APPLIED" }
  29     }
  30
  31     @supports not (not (not (display: none))) {
  32         #t5 { content: "FAIL" }
  33     }
  34
  35     /* Conjunction */
  36     @supports (display: none) and (display: block) {
  37         #t6 { content: "APPLIED" }
  38     }
  39
  40     @supports (display: none) and (display: block) and (display: inline) {
  41         #t7 { content: "APPLIED" }
  42     }
  43
  44     @supports (display: none) and (display: block) and (display: deadbeef) and (display: inline) {
  45         #t8 { content: "FAIL" }
  46     }
  47
  48     /* Disjunction */
  49     @supports (display: none) or (display: inline) {
  50         #t9 { content: "APPLIED" }
  51     }
  52
  53     @supports (display: none) or (display: block) or (display: inline) {
  54         #t10 { content: "APPLIED" }
  55     }
  56
  57     @supports (display: none) or (display: deadbeef) or (display: inline) {
  58         #t11 { content: "APPLIED" }
  59     }
  60
  61     @supports (display: ohhai) or (display: deadbeef) or (display: rainbows) {
  62         #t12 { content: "FAIL" }
  63     }
  64
  65     /* Bad syntax. Can't mix operators without a layer of parentheses. */
  66     @supports (display: none) and (display: block) or (display: inline) {
  67         #t13 { content: "FAIL" }
  68     }
  69
  70     @supports not (display: deadbeef) and (display: block) {
  71         #t14 { content: "FAIL" }
  72     }
  73
  74     /* Mix 'n match */
  75     @supports (not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block) {
  76         #t15 { content: "APPLIED" }
  77     }
  78
  79     @supports (display: block !important) and ((display: inline) or (display: deadbeef)){
  80         #t16 { content: "APPLIED" }
  81     }
  82
  83     @supports not ((not (display: block)) or ((display: none) and (deadbeef: 1px))) {
  84         #t17 { content: "APPLIED" }
  85     }
  86
  87     /* Whitespace/Syntax */
  88     @supports not( display: deadbeef) {
  89         #t22 { content: "FAIL" }
  90     }
  91
  92     @supports (display: none)and (   -webkit-transition: all 1s ) {
  93         #t23 { content: "FAIL" }
  94     }
  95
  96     @supports (display: none)or(-webkit-transition: all 1s) {
  97         #t24 { content: "FAIL" }
  98     }
  99
 100     @supports (display: none) or(-webkit-transition: all 1s    ) {
 101         #t25 { content: "FAIL" }
 102     }
 103
 104     @supports (((((((display: none))))))) {
 105         #t26 { content: "APPLIED" }
 106     }
 107
 108     @supports(((((((display: none))))))) {
 109         #t27 { content: "APPLIED" }
 110     }
 111
 112     @supports (!important) {
 113         #t28 { content: "FAIL" }
 114     }
 115
 116     @supports not not not not (display: none) {
 117         #t29 { content: "FAIL" }
 118     }
 119
 120     /* Functions */
 121
 122     @supports (top: -webkit-calc(80% - 20px)) {
 123         #t30 { content: "APPLIED" }
 124     }
 125
 126     @supports (background-color: rgb(0, 128, 0)) {
 127         #t31 { content: "APPLIED" }
 128     }
 129
 130     @supports (background: url("/blah")) {
 131         #t32 { content: "APPLIED" }
 132     }
 133
 134     @supports ((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0, 128, 0)))) or (background: url("/blah")) {
 135         #t33 { content: "APPLIED" }
 136     }
 137
 138     @supports (background: invalid("/blah")) {
 139         #t34 { content: "FAIL" }
 140     }
 141
 142     /* Nesting. */
 143     @supports (display: none) {
 144         @supports (display: deadbeef) {
 145             #t18 { content: "FAIL" }
 146         }
 147         @supports (display: inline) {
 148             #t19 { content: "APPLIED" }
 149         }
 150         @supports (display: inline) {
 151         }
 152         @media all {
 153             #t20 { content: "APPLIED" }
 154             @supports (display: inline) {
 155                 #t21 { content: "APPLIED" }
 156             }
 157         }
 158     }
 159
 160     @media all {
 161         @supports (display: inline) {
 162             @media all {
 163                 @supports (display: none) {
 164                     #t35 { content: "APPLIED" }
 165                 }
 166             }
 167         }
 168     }
 169
 170     @media not all {
 171         @supports (display: none) {
 172             #t36 { content: "FAIL" }
 173         }
 174     }
 175
 176     /* Invalid syntax error recovery */
 177
 178     @supports (display: none);
 179     @supports (display: none) and ( (display: none) ) {
 180         #t37 { content: "APPLIED" }
 181     }
 182
 183     @supports (display: none)) ;
 184     @supports (display: none) {
 185         #t38 { content: "APPLIED" }
 186     }
 187
 188     @supports;
 189     @supports (display: none) {
 190         #t39 { content: "APPLIED" }
 191     }
 192
 193     @supports ;
 194     @supports (display: none) {
 195         #t40 { content: "APPLIED" }
 196     }
 197
 198     @supports (display: none)) {
 199         #t41 { content: "FAIL" }
 200     }
 201     @supports (display: none) {
 202         #t41 { content: "APPLIED" }
 203     }
 204
 205     @supports (display: )) {
 206         #t42 { content: "FAIL" }
 207     }
 208     @supports (display: none) {
 209         #t42 { content: "APPLIED" }
 210     }
 211
 212     @supports ((display: none) and {
 213         #t43 { content: "FAIL" }
 214     }
 215     @supports (display: none) {
 216         #t43 { content: "FAIL" }
 217     }
 218     );
 219
 220     @supports ((display: none) and ;
 221     @supports (display: none) {
 222         #t44 { content: "FAIL" }
 223     }
 224     );
 225
 226     @supports (#(display: none) {}
 227         #t45 { content: "FAIL" }
 228     );
 229
 230     @supports ((display: none#) {}
 231         #t46 { content: "FAIL" }
 232     );
 233
 234     @supports (#) or (display: none) {
 235         #t47 { content: "APPLIED"; }
 236     }
 237
 238 </style>
 239 </head>
 240 <body>
 241 <div id="test_container"></div>
 242
 243 <script>
 244     description("Test the @supports rule.");
 245     var numTests = 48;
 246     var untouchedTests = [1, 3, 5, 8, 12, 13, 14, 18, 22, 23, 24, 25, 28, 29, 34, 36, 43, 44, 45, 46]; // Tests whose content shouldn't change from the UNTOUCHED default.
 247
 248     var container = document.getElementById("test_container");
 249     for (var i=0; i < numTests; i++) {
 250         var div = document.createElement("div");
 251         div.id = "t" + i;
 252         div.className = "test";
 253         container.appendChild(div);
 254         shouldBeEqualToString("getComputedStyle(document.getElementById('t"+i+"')).content", untouchedTests.indexOf(i) >= 0 ? '"UNTOUCHED"' : '"APPLIED"');
 255     }
 256
 257     test_container.parentNode.removeChild(test_container);
 258 </script>
 259 </body>
 260 </html>