third_party/WebKit/LayoutTests/css3/supports-dom-api.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script src="../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <script>
   8     description("Test window.CSS.supports()");
   9
  10     shouldBeTrue('CSS.supports("(display: none)")');
  11     shouldBeFalse('CSS.supports("(display: deadbeef)")');
  12
  13     // Negation
  14     shouldBeTrue('CSS.supports("not (display: deadbeef)")');
  15     shouldBeFalse('CSS.supports("not (display: none)")');
  16     shouldBeTrue('CSS.supports("not (not (display: none))")');
  17     shouldBeFalse('CSS.supports("not (not (not (display: none)))")');
  18
  19     // Conjunction.
  20     shouldBeTrue('CSS.supports("(display: none) and (display: block)")');
  21     shouldBeTrue('CSS.supports("(display: none) and (display: block) and (display: inline)")');
  22     shouldBeFalse('CSS.supports("(display: none) and (display: block) and (display: deadbeef) and (display: inline)")');
  23
  24     // Disjunction.
  25     shouldBeTrue('CSS.supports("(display: none) or (display: inline)")');
  26     shouldBeTrue('CSS.supports("(display: none) or (display: block) or (display: inline)")');
  27     shouldBeTrue('CSS.supports("(display: none) or (display: deadbeef) or (display: inline)")');
  28     shouldBeFalse('CSS.supports("(display: ohhai) or (display: deadbeef) or (display: rainbows)")');
  29
  30     // Bad syntax. Can't mix operators without a layer of parentheses..
  31     shouldBeFalse('CSS.supports("(display: none) and (display: block) or (display: inline)")');
  32     shouldBeFalse('CSS.supports("not (display: deadbeef) and (display: block)")');
  33
  34     // Mix 'n match.
  35     shouldBeTrue('CSS.supports("(not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block)")');
  36     shouldBeTrue('CSS.supports("(display: block !important) and ((display: inline) or (display: deadbeef))")');
  37     shouldBeTrue('CSS.supports("not ((not (display: block)) or ((display: none) and (deadbeef: 1px)))")');
  38
  39     // Whitespace/Syntax.
  40     shouldBeFalse('CSS.supports("not( display: deadbeef)")');
  41     shouldBeFalse('CSS.supports("(display: none)and (   -webkit-transition: all 1s )")');
  42     shouldBeFalse('CSS.supports("(display: none)or(-webkit-transition: all 1s)")');
  43     shouldBeFalse('CSS.supports("(display: none) or(-webkit-transition: all 1s    )")');
  44     shouldBeTrue('CSS.supports("(((((((display: none)))))))")');
  45     shouldBeFalse('CSS.supports("(!important)")');
  46     shouldBeFalse('CSS.supports("not not not not (display: none)")');
  47
  48     // Functions.
  49     shouldBeTrue('CSS.supports("(top: -webkit-calc(80% - 20px))")');
  50     shouldBeTrue('CSS.supports("(background-color: rgb(0, 128, 0))")');
  51     shouldBeTrue('CSS.supports("(background: url(\'/blah\'))")');
  52     shouldBeTrue('CSS.supports("((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0, 128, 0)))) or (background: url(\'/blah\'))")');
  53     shouldBeFalse('CSS.supports("(background: invalid(\'/blah\'))")');
  54
  55     // Property/value variant.
  56     shouldBeTrue('CSS.supports("top", "20%")');
  57     shouldBeTrue('CSS.supports("top", " 20px   ")');
  58     shouldBeFalse('CSS.supports("top", "20")');
  59     shouldBeFalse('CSS.supports("dis\\nplay", "none")');
  60     shouldBeFalse('CSS.supports("display", "rainbow")');
  61     shouldBeFalse('CSS.supports("display", "url(rainbow.png)")');
  62     shouldBeFalse('CSS.supports(" background   ", "url(rainbow.png)")');
  63     shouldBeFalse('CSS.supports("background", "invalid(rainbow.png)")');
  64     shouldBeTrue('CSS.supports("background-color", "#000")');
  65     shouldBeTrue('CSS.supports("background-color", "rgba(0,0,0,0)")');
  66     shouldBeTrue('CSS.supports("background-color", "inherit")');
  67     shouldBeFalse('CSS.supports("font-family", "\'\\n\'")');
  68
  69     shouldBeFalse('CSS.supports("display", "none !important")');
  70     shouldBeFalse('CSS.supports("display", "none!important")');
  71     shouldBeFalse('CSS.supports("display", "!important none")');
  72     shouldBeFalse('CSS.supports("display", "none !important ! important ")');
  73     shouldBeFalse('CSS.supports("display", "none ! important")');
  74     shouldBeFalse('CSS.supports("display", "none ! \timportant")');
  75     shouldBeFalse('CSS.supports("display", "none ! \\nimportant")');
  76
  77     shouldBeFalse('CSS.supports("", "")');
  78     shouldBeFalse('CSS.supports(true, "")');
  79     shouldBeFalse('CSS.supports([], "none")');
  80     shouldBeFalse('CSS.supports("display", "")');
  81     shouldBeFalse('CSS.supports("display:", "none")');
  82     shouldBeTrue('CSS.supports("z-index", 1)');
  83     shouldBeFalse('CSS.supports("content", [])');
  84     shouldBeFalse('CSS.supports("content", "!important")');
  85     shouldBeFalse('CSS.supports("(display: none)", undefined)');
  86
  87     // Test that __qem is internal
  88     shouldBeFalse('CSS.supports("margin", "1__qem")');
  89
  90     // shorthands and CSS wide keywords
  91     shouldBeTrue('CSS.supports("border", "1px solid #000")');
  92     shouldBeTrue('CSS.supports("border", "inherit")');
  93     shouldBeFalse('CSS.supports("border", "1px solid inherit")');
  94     shouldBeFalse('CSS.supports("border", "inherit solid #000")');
  95     shouldBeTrue('CSS.supports("border-bottom", "thick green")');
  96     shouldBeTrue('CSS.supports("border-bottom", "inherit")');
  97     shouldBeFalse('CSS.supports("border-bottom", "thick green inherit")');
  98     shouldBeFalse('CSS.supports("border-bottom", "inherit thick green")');
  99     shouldBeTrue('CSS.supports("border-left", "thick green")');
 100     shouldBeTrue('CSS.supports("border-left", "inherit")');
 101     shouldBeFalse('CSS.supports("border-left", "thick green inherit")');
 102     shouldBeFalse('CSS.supports("border-left", "inherit thick green")');
 103     shouldBeTrue('CSS.supports("border-right", "thick green")');
 104     shouldBeTrue('CSS.supports("border-right", "inherit")');
 105     shouldBeFalse('CSS.supports("border-right", "thick green inherit")');
 106     shouldBeFalse('CSS.supports("border-right", "inherit thick green")');
 107     shouldBeTrue('CSS.supports("border-top", "thick green")');
 108     shouldBeTrue('CSS.supports("border-top", "inherit")');
 109     shouldBeFalse('CSS.supports("border-top", "thick green inherit")');
 110     shouldBeFalse('CSS.supports("border-top", "inherit thick green")');
 111     shouldBeTrue('CSS.supports("border-radius", "1px 0 3px 4px")');
 112     shouldBeTrue('CSS.supports("border-radius", "inherit")');
 113     shouldBeFalse('CSS.supports("border-radius", "1px 0 3px inherit")');
 114     shouldBeFalse('CSS.supports("border-radius", "inherit 0 3px 4px")');
 115     shouldBeTrue('CSS.supports("border-spacing", "5px 5px")');
 116     shouldBeTrue('CSS.supports("border-spacing", "inherit")');
 117     shouldBeFalse('CSS.supports("border-spacing", "5px inherit")');
 118     shouldBeFalse('CSS.supports("border-spacing", "inherit 5px")');
 119     shouldBeTrue('CSS.supports("font", "italic small-caps bolder 16px/3 cursive")');
 120     shouldBeTrue('CSS.supports("font", "inherit")');
 121     shouldBeFalse('CSS.supports("font", "italic small-caps bolder 16px/3 inherit")');
 122     shouldBeFalse('CSS.supports("font", "inherit small-caps bolder 16px/3 cursive")');
 123     shouldBeTrue('CSS.supports("list-style", "georgian inside")');
 124     shouldBeTrue('CSS.supports("list-style", "inherit")');
 125     shouldBeFalse('CSS.supports("list-style", "georgian inherit")');
 126     shouldBeFalse('CSS.supports("list-style", "inherit inside")');
 127     // border-width, border-color, border-style and padding use same code path as margin
 128     shouldBeTrue('CSS.supports("margin", "5px")');
 129     shouldBeTrue('CSS.supports("margin", "inherit")');
 130     shouldBeFalse('CSS.supports("margin", "inherit 5px")');
 131     shouldBeFalse('CSS.supports("margin", "5px inherit")');
 132     shouldBeFalse('CSS.supports("margin", "inherit 5px 5px")');
 133     shouldBeFalse('CSS.supports("margin", "inherit 5px 5px 5px")');
 134     shouldBeTrue('CSS.supports("outline", "1px solid #000")');
 135     shouldBeTrue('CSS.supports("outline", "inherit")');
 136     shouldBeFalse('CSS.supports("outline", "1px solid inherit")');
 137     shouldBeFalse('CSS.supports("outline", "inherit solid #000")');
 138     shouldBeTrue('CSS.supports("overflow", "scroll")');
 139     shouldBeTrue('CSS.supports("overflow", "inherit")');
 140     shouldBeFalse('CSS.supports("overflow", "inherit scroll")');
 141     shouldBeFalse('CSS.supports("overflow", "scroll inherit")');
 142     shouldBeTrue('CSS.supports("transform", "scaleX(2)")');
 143     shouldBeTrue('CSS.supports("transform", "inherit")');
 144     shouldBeFalse('CSS.supports("transform", "scaleX(2) inherit")');
 145     shouldBeFalse('CSS.supports("transform", "inherit scaleX(2)")');
 146     shouldBeTrue('CSS.supports("transition", "margin-left 4s")');
 147     shouldBeTrue('CSS.supports("transition", "inherit")');
 148     shouldBeFalse('CSS.supports("transition", "margin-left inherit")');
 149     shouldBeFalse('CSS.supports("transition", "inherit 4s")');
 150 </script>
 151 </body>
 152 </html>