[CSS] Accept 8 (#RRGGBBAA) and 4 (#RGBA) value hex colors

third_party/WebKit/LayoutTests/fast/css/parsing-color-quirk.html

 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <style>
 #t1 { color: 008000 }
 #t2 { background-color: 008000 }
 #t3 { border-color: 008000  }
 #t4 { border-bottom-color: 008000  }
 #t5 { border-left-color: 008000  }
 #t6 { border-right-color: 008000  }
 #t7 { border-top-color: 008000  }
@@ skipping 25 matching lines @@
 #t27 { border-right: ff0000 }
 #t28 { border-bottom: ff0000 }
 #t29 { border: ff0000 }
 
 #t30 { background-color: 1.1 }
 #t31 { background-color: +1.1 }
 #t32 { background-color: 1e1 }
 #t33 { background-color: 1e+1 }
 #t34 { background-color: 1e-1 }
 #t35 { background-color: 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222f }
+
+#t36 { border-color: 1010 }
+#t37 { border-color: 00101010 }
+#t38 { border-color: ff10 }
+#t39 { border-color: ff101010 }
 </style>
 <script>
 var sheet = document.styleSheets[0];
 
 test(function(){ assert_true(!!sheet); }, "StyleSheet present");
-test(function(){ assert_equals(sheet.cssRules.length, 35); }, "All rules parsed");
+test(function(){ assert_equals(sheet.cssRules.length, 39); }, "All rules parsed");
 
 test(function(){
     assert_equals(sheet.cssRules[0].style.color, "rgb(0, 128, 0)");
 }, "Hashless color quirk for color property");
 
 test(function(){
     assert_equals(sheet.cssRules[1].style.backgroundColor, "rgb(0, 128, 0)");
 }, "Hashless color quirk for background-color property");
 
 test(function(){
@@ skipping 121 matching lines @@
 }, "No hashless color quirk for background-color property with invalid hashless value");
 
 test(function(){
     assert_equals(sheet.cssRules[33].style.backgroundColor, "");
 }, "No hashless color quirk for background-color property with invalid hashless value");
 
 test(function(){
     assert_equals(sheet.cssRules[34].style.backgroundColor, "");
 }, "No hashless color quirk for background-color property with invalid hashless value");
 
+test(function(){
+    assert_equals(sheet.cssRules[35].style.borderColor, "rgb(0, 16, 16)");
+}, "No hashless color quirk for border-color property with 4/8 hex color value");

[Timothy Loh, 2016/05/11 07:23:08]

The test comment for this and the next are wrong, since these are valid
<quirky-color>s. I'd just write something like "1010 is valid a <quirky-color>".

[PhistucK, 2016/05/11 08:02:46]

Why are they valid?
Step 4 in https://quirks.spec.whatwg.org/#the-hashless-hex-color-quirk says -
"If serialization does not consist of three or six characters, return an error."
There are four (or eight) characters, not three or six. I find it hard to
believe that new quirks will be added (a quirk for the four or eight character
hex notation), since it is supposed to accommodate legacy pages, not new pages
written in quirks mode...

[Timothy Loh, 2016/05/11 08:05:03]

At this point "serialization" consists of six characters, see the earlier steps
in the algorithm.

[Noel Gordon, 2016/05/12 01:59:26]

Did something like that: adjusted the comments to all the added test cases, in
fact.

+
+test(function(){
+    assert_equals(sheet.cssRules[36].style.borderColor, "rgb(16, 16, 16)");
+}, "No hashless color quirk for border-color property with 4/8 hex color value");
+
+test(function(){
+    assert_equals(sheet.cssRules[37].style.borderColor, "");
+}, "No hashless color quirk for border-color property with 4/8 hex color value");
+
+test(function(){
+    assert_equals(sheet.cssRules[38].style.borderColor, "");
+}, "No hashless color quirk for border-color property with 4/8 hex color value");
 </script>