third_party/WebKit/LayoutTests/fast/css/attribute-selector-case-insensitive.html

   1 <!DOCTYPE html>
   2
   3 <style type="text/css">
   4   div { border: 2px solid red; }
   5   div[attr1="LOWER"] { border-top-color: yellow }
   6   div[attr1="lower"] { border-top-color: green }
   7   div[attr2="upper"] { border-right-color: yellow }
   8   div[attr2="UPPER"] { border-right-color: green }
   9   div[attr3="lower" i] { border-bottom-color: green }
  10   div[attr4="UPPER" i] { border-left-color: green }
  11
  12   div[attr-list~="BaR" i] { border: 2px solid green; }
  13   div[attr-hyphen|="FoO" i] { border: 2px solid green; }
  14   div[attr-begin^="FoO" i] { border: 2px solid green; }
  15   div[attr-end$="BaR" i] { border: 2px solid green; }
  16   div[attr-contain*="OoB" i] { border: 2px solid green; }
  17 </style>
  18
  19 <div id="element-exact" attr1="lower" attr2="UPPER" attr3="LOWER" attr4="upper"></div>
  20 <div id="element-list" attr-list="foo bar"></div>
  21 <div id="element-hyphen" attr-hyphen="foo-bar"></div>
  22 <div id="element-begin" attr-begin="foobar"></div>
  23 <div id="element-end" attr-end="foobar"></div>
  24 <div id="element-contains" attr-end="foobar"></div>
  25
  26 <p>
  27   PASS if all elements borders are all green, not red.
  28 </p>
  29
  30 <script src="../../resources/js-test.js"></script>
  31 <script>
  32   if (window.testRunner)
  33     testRunner.dumpAsText();
  34
  35   function checkBorders(elementId) {
  36     debug("Testing " + elementId.split('-')[1] + " attribute selector.");
  37     element = document.getElementById(elementId);
  38     shouldBe("window.getComputedStyle(element).borderTopColor", "'rgb(0, 128, 0)'");
  39     shouldBe("window.getComputedStyle(element).borderRightColor", "'rgb(0, 128, 0)'");
  40     shouldBe("window.getComputedStyle(element).borderBottomColor", "'rgb(0, 128, 0)'");
  41     shouldBe("window.getComputedStyle(element).borderLeftColor", "'rgb(0, 128, 0)'");
  42   }
  43
  44   checkBorders("element-exact");
  45   checkBorders("element-list");
  46   checkBorders("element-hyphen");
  47   checkBorders("element-begin");
  48   checkBorders("element-end");
  49   checkBorders("element-contains");
  50 </script>