Implement select listbox using shadow DOM

LayoutTests/fast/forms/resources/select-live-pseudo-selectors.js

 description("This test performs a check that :valid/:invalid CSS psudo selectors are lively applied.");
 
 // Setup for static elements.
 var form = document.createElement('form');
 document.body.appendChild(form);
 var nonForm = document.createElement('div');
 document.body.appendChild(nonForm);
 
 function mouseDownOnSelect(selId, index, modifier) {
     var sl = document.getElementById(selId);
@@ skipping 98 matching lines @@
 '  <option id="multiple-empty">empty</option>' +
 '  <option id="multiple-another">another</option>' +
 '</select>' +
 '<select id="select-size4" size="4" required>' +
 '  <option id="size4-empty">empty</option>' +
 '  <option id="size4-another">another</option>' +
 '</select>';
 mouseDownOnSelect('select-multiple', 0);
 mouseDownOnSelect('select-size4', 0);
 shouldBe('backgroundOf("select-multiple")', 'validColor');
-shouldBe('backgroundOf("multiple-empty")', 'transparentColor');

[keishi, 2014/06/22 11:59:55]

Background color of this option is -internal-active-listbox-selection-color

+shouldNotBe('backgroundOf("multiple-empty")', 'validColor');
 shouldBe('backgroundOf("select-size4")', 'validColor');
-shouldBe('backgroundOf("size4-empty")', 'transparentColor');
+shouldNotBe('backgroundOf("size4-empty")', 'validColor');
 
 debug('Change the value with a placeholder label option:');
 el = makeInvalid();
 o1 = appendOption('', el);
 o2 = appendOption('X', el);
 o2.selected = true;
 shouldBe(elBackground, 'validColor');
 o1.selected = true;
 shouldBe(elBackground, 'invalidColor');
 
@@ skipping 73 matching lines @@
 // --------------------------------
 debug('Change required:');
 el = makeInvalid();
 o1 = appendOption('', el);
 o2 = appendOption('X', el);
 o1.selected = true;
 el.required = false;
 shouldBe(elBackground, 'validColor');
 el.required = true;
 shouldBe(elBackground, 'invalidColor');