supports-dom-api.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body>
<script>
    description("Test window.CSS.supports()");

    shouldBeTrue('CSS.supports("display: none")');
    shouldBeTrue('CSS.supports("  display: none ")');
    shouldBeTrue('CSS.supports("(display: none)")');
    shouldBeFalse('CSS.supports("(display: deadbeef)")');

    shouldBeFalse('CSS.supports("display: deadbeef")');
    shouldBeTrue('CSS.supports("(display: none) and ((display: block) or (display: inline))")');
    shouldBeTrue('CSS.supports("(not (display: deadbeef)) and (display: block)")');
    shouldBeTrue('CSS.supports("top: calc(80% - 20px)")');
    shouldBeTrue('CSS.supports("background-color: rgb(0, 128, 0)")');
    shouldBeTrue('CSS.supports("background: url(\'/blah\')")');
    shouldBeFalse('CSS.supports("background: invalid(\'/blah\')")');
    shouldBeFalse('CSS.supports("display: none;")');
    shouldBeFalse('CSS.supports("display: none; garbage")');
    shouldBeFalse('CSS.supports("  display: none ; garbage ")');

    // Negation
    shouldBeTrue('CSS.supports("not (display: deadbeef)")');
    shouldBeFalse('CSS.supports("not (display: none)")');
    shouldBeTrue('CSS.supports("not (not (display: none))")');
    shouldBeFalse('CSS.supports("not (not (not (display: none)))")');

    // Conjunction.
    shouldBeTrue('CSS.supports("(display: none) and (display: block)")');
    shouldBeTrue('CSS.supports("(display: none) and (display: block) and (display: inline)")');
    shouldBeFalse('CSS.supports("(display: none) and (display: block) and (display: deadbeef) and (display: inline)")');

    // Disjunction.
    shouldBeTrue('CSS.supports("(display: none) or (display: inline)")');
    shouldBeTrue('CSS.supports("(display: none) or (display: block) or (display: inline)")');
    shouldBeTrue('CSS.supports("(display: none) or (display: deadbeef) or (display: inline)")');
    shouldBeFalse('CSS.supports("(display: ohhai) or (display: deadbeef) or (display: rainbows)")');

    // Bad syntax. Can't mix operators without a layer of parentheses..
    shouldBeFalse('CSS.supports("(display: none) and (display: block) or (display: inline)")');
    shouldBeFalse('CSS.supports("not (display: deadbeef) and (display: block)")');

    // Mix 'n match.
    shouldBeTrue('CSS.supports("(not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block)")');
    shouldBeTrue('CSS.supports("(display: block !important) and ((display: inline) or (display: deadbeef))")');
    shouldBeTrue('CSS.supports("not ((not (display: block)) or ((display: none) and (deadbeef: 1px)))")');

    // Whitespace/Syntax.
    shouldBeFalse('CSS.supports("not( display: deadbeef)")');
    shouldBeTrue('CSS.supports("(display: none)and (   -webkit-transition: all 1s )")');
    shouldBeFalse('CSS.supports("(display: none)or(-webkit-transition: all 1s)")');
    shouldBeFalse('CSS.supports("(display: none) or(-webkit-transition: all 1s    )")');
    shouldBeTrue('CSS.supports("(((((((display: none)))))))")');
    shouldBeFalse('CSS.supports("(!important)")');
    shouldBeFalse('CSS.supports("not not not not (display: none)")');

    // Functions.
    shouldBeTrue('CSS.supports("(top: -webkit-calc(80% - 20px))")');
    shouldBeTrue('CSS.supports("(background-color: rgb(0, 128, 0))")');
    shouldBeTrue('CSS.supports("(background: url(\'/blah\'))")');
    shouldBeTrue('CSS.supports("((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0, 128, 0)))) or (background: url(\'/blah\'))")');
    shouldBeFalse('CSS.supports("(background: invalid(\'/blah\'))")');

    // Property/value variant.
    shouldBeTrue('CSS.supports("top", "20%")');
    shouldBeTrue('CSS.supports("top", " 20px   ")');
    shouldBeFalse('CSS.supports("top", "20")');
    shouldBeFalse('CSS.supports("dis\\nplay", "none")');
    shouldBeFalse('CSS.supports("display", "rainbow")');
    shouldBeFalse('CSS.supports("display", "url(rainbow.png)")');
    shouldBeFalse('CSS.supports(" background   ", "url(rainbow.png)")');
    shouldBeFalse('CSS.supports("background", "invalid(rainbow.png)")');
    shouldBeTrue('CSS.supports("background-color", "#000")');
    shouldBeTrue('CSS.supports("background-color", "rgba(0,0,0,0)")');
    shouldBeTrue('CSS.supports("background-color", "inherit")');
    shouldBeFalse('CSS.supports("font-family", "\'\\n\'")');

    shouldBeFalse('CSS.supports("display", "none !important")');
    shouldBeFalse('CSS.supports("display", "none!important")');
    shouldBeFalse('CSS.supports("display", "!important none")');
    shouldBeFalse('CSS.supports("display", "none !important ! important ")');
    shouldBeFalse('CSS.supports("display", "none ! important")');
    shouldBeFalse('CSS.supports("display", "none ! \timportant")');
    shouldBeFalse('CSS.supports("display", "none ! \\nimportant")');

    shouldBeFalse('CSS.supports("", "")');
    shouldBeFalse('CSS.supports(true, "")');
    shouldBeFalse('CSS.supports([], "none")');
    shouldBeFalse('CSS.supports("display", "")');
    shouldBeFalse('CSS.supports("display:", "none")');
    shouldBeTrue('CSS.supports("z-index", 1)');
    shouldBeFalse('CSS.supports("content", [])');
    shouldBeFalse('CSS.supports("content", "!important")');
    shouldBeFalse('CSS.supports("(display: none)", undefined)');

    // Test that __qem is internal
    shouldBeFalse('CSS.supports("margin", "1__qem")');

    // shorthands and CSS wide keywords
    shouldBeTrue('CSS.supports("border", "1px solid #000")');
    shouldBeTrue('CSS.supports("border", "inherit")');
    shouldBeFalse('CSS.supports("border", "1px solid inherit")');
    shouldBeFalse('CSS.supports("border", "inherit solid #000")');
    shouldBeTrue('CSS.supports("border-bottom", "thick green")');
    shouldBeTrue('CSS.supports("border-bottom", "inherit")');
    shouldBeFalse('CSS.supports("border-bottom", "thick green inherit")');
    shouldBeFalse('CSS.supports("border-bottom", "inherit thick green")');
    shouldBeTrue('CSS.supports("border-left", "thick green")');
    shouldBeTrue('CSS.supports("border-left", "inherit")');
    shouldBeFalse('CSS.supports("border-left", "thick green inherit")');
    shouldBeFalse('CSS.supports("border-left", "inherit thick green")');
    shouldBeTrue('CSS.supports("border-right", "thick green")');
    shouldBeTrue('CSS.supports("border-right", "inherit")');
    shouldBeFalse('CSS.supports("border-right", "thick green inherit")');
    shouldBeFalse('CSS.supports("border-right", "inherit thick green")');
    shouldBeTrue('CSS.supports("border-top", "thick green")');
    shouldBeTrue('CSS.supports("border-top", "inherit")');
    shouldBeFalse('CSS.supports("border-top", "thick green inherit")');
    shouldBeFalse('CSS.supports("border-top", "inherit thick green")');
    shouldBeTrue('CSS.supports("border-radius", "1px 0 3px 4px")');
    shouldBeTrue('CSS.supports("border-radius", "inherit")');
    shouldBeFalse('CSS.supports("border-radius", "1px 0 3px inherit")');
    shouldBeFalse('CSS.supports("border-radius", "inherit 0 3px 4px")');
    shouldBeTrue('CSS.supports("border-spacing", "5px 5px")');
    shouldBeTrue('CSS.supports("border-spacing", "inherit")');
    shouldBeFalse('CSS.supports("border-spacing", "5px inherit")');
    shouldBeFalse('CSS.supports("border-spacing", "inherit 5px")');
    shouldBeTrue('CSS.supports("font", "italic small-caps bolder 16px/3 cursive")');
    shouldBeTrue('CSS.supports("font", "inherit")');
    shouldBeFalse('CSS.supports("font", "italic small-caps bolder 16px/3 inherit")');
    shouldBeFalse('CSS.supports("font", "inherit small-caps bolder 16px/3 cursive")');
    shouldBeTrue('CSS.supports("list-style", "georgian inside")');
    shouldBeTrue('CSS.supports("list-style", "inherit")');
    shouldBeFalse('CSS.supports("list-style", "georgian inherit")');
    shouldBeFalse('CSS.supports("list-style", "inherit inside")');
    // border-width, border-color, border-style and padding use same code path as margin
    shouldBeTrue('CSS.supports("margin", "5px")');
    shouldBeTrue('CSS.supports("margin", "inherit")');
    shouldBeFalse('CSS.supports("margin", "inherit 5px")');
    shouldBeFalse('CSS.supports("margin", "5px inherit")');
    shouldBeFalse('CSS.supports("margin", "inherit 5px 5px")');
    shouldBeFalse('CSS.supports("margin", "inherit 5px 5px 5px")');
    shouldBeTrue('CSS.supports("outline", "1px solid #000")');
    shouldBeTrue('CSS.supports("outline", "inherit")');
    shouldBeFalse('CSS.supports("outline", "1px solid inherit")');
    shouldBeFalse('CSS.supports("outline", "inherit solid #000")');
    shouldBeTrue('CSS.supports("overflow", "scroll")');
    shouldBeTrue('CSS.supports("overflow", "inherit")');
    shouldBeFalse('CSS.supports("overflow", "inherit scroll")');
    shouldBeFalse('CSS.supports("overflow", "scroll inherit")');
    shouldBeTrue('CSS.supports("transform", "scaleX(2)")');
    shouldBeTrue('CSS.supports("transform", "inherit")');
    shouldBeFalse('CSS.supports("transform", "scaleX(2) inherit")');
    shouldBeFalse('CSS.supports("transform", "inherit scaleX(2)")');
    shouldBeTrue('CSS.supports("transition", "margin-left 4s")');
    shouldBeTrue('CSS.supports("transition", "inherit")');
    shouldBeFalse('CSS.supports("transition", "margin-left inherit")');
    shouldBeFalse('CSS.supports("transition", "inherit 4s")');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/css3/supports-dom-api.html
