third_party/WebKit/LayoutTests/fast/svg/foreign-object-case-sensitivity.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 svg {
   5     display: block;
   6     width: 100%;
   7     height: 100px
   8 }
   9
  10 foreignObject {
  11     color: green;
  12     display: block
  13 }
  14
  15 foreignobject {
  16     font-weight: bold
  17 }
  18 </style>
  19 <foreignObject id="fo1">This text should be green and bold</foreignObject>
  20 <FOREIGNObject id="fo2">This text should be green and bold</FOREIGNObject>
  21 <svg>
  22     <foreignObject y="10" id="fo3" width="400" height="50">This text should be green, not bold</foreignObject>
  23     <FOREIGNobject y="30" id="fo4" width="400" height="50">This text should be green, not bold</FOREIGNobject>
  24 </svg>
  25 <script>
  26 description("Testing case-sensitivity for the svg:foreignObject tag in html.");
  27
  28 debug("Node.localName is normalized to camel-case inside &lt;svg&gt;, lower-case otherwise.\n");
  29
  30 shouldBeEqualToString("fo1.localName", "foreignobject");
  31 shouldBeEqualToString("fo2.localName", "foreignobject");
  32 shouldBeEqualToString("fo3.localName", "foreignObject");
  33 shouldBeEqualToString("fo4.localName", "foreignObject");
  34
  35 debug("\nSelectors API queries match case-insensitively for html and svg elements in html documents.\n(Should have matched case-sensitively for svg elements according to the html spec.)\n");
  36
  37 var queryAllLower = document.querySelectorAll("foreignOBJEct");
  38 shouldBe("queryAllLower.length", "4");
  39 shouldBeEqualToString("queryAllLower[0].id", "fo1");
  40 shouldBeEqualToString("queryAllLower[1].id", "fo2");
  41 shouldBeEqualToString("queryAllLower[2].id", "fo3");
  42 shouldBeEqualToString("queryAllLower[3].id", "fo4");
  43
  44 var queryAllCamel = document.querySelectorAll("foreignObject");
  45 shouldBe("queryAllCamel.length", "4");
  46 shouldBeEqualToString("queryAllCamel[0].id", "fo1");
  47 shouldBeEqualToString("queryAllCamel[1].id", "fo2");
  48 shouldBeEqualToString("queryAllCamel[2].id", "fo3");
  49 shouldBeEqualToString("queryAllCamel[3].id", "fo4");
  50
  51 debug("\ngetElementsByTagName matches case-insensitively for html elements, case-sensitively for svg elements in html documents.\n");
  52
  53 var byTagNameLower = document.getElementsByTagName("foreignOBJEct");
  54 shouldBe("byTagNameLower.length", "2");
  55 shouldBeEqualToString("byTagNameLower[0].id", "fo1");
  56 shouldBeEqualToString("byTagNameLower[1].id", "fo2");
  57
  58 var byTagNameCamel = document.getElementsByTagName("foreignObject");
  59 shouldBe("byTagNameCamel.length", "4");
  60 shouldBeEqualToString("byTagNameCamel[0].id", "fo1");
  61 shouldBeEqualToString("byTagNameCamel[1].id", "fo2");
  62 shouldBeEqualToString("byTagNameCamel[2].id", "fo3");
  63 shouldBeEqualToString("byTagNameCamel[3].id", "fo4");
  64
  65 debug("\nStyle rule matches case-insensitively for html and svg elements in html documents.\n(Should have matched case-sensitively for svg elements according to the html spec).\n");
  66
  67 function testComputedStyle(id, color, fontWeight){
  68     shouldBeEqualToString("getComputedStyle("+id+").color", color);
  69     shouldBeEqualToString("getComputedStyle("+id+").fontWeight", fontWeight);
  70 }
  71
  72 testComputedStyle("fo1", "rgb(0, 128, 0)", "bold");
  73 testComputedStyle("fo2", "rgb(0, 128, 0)", "bold");
  74 testComputedStyle("fo3", "rgb(0, 128, 0)", "bold");
  75 testComputedStyle("fo4", "rgb(0, 128, 0)", "bold");
  76
  77 </script>