From 4e0fb1ed61fca6b4945d23b4b762e265708fe62a Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Fri, 21 Aug 2015 17:19:36 -0700
Subject: [PATCH] resources: Improve the look of form widgets a bit.

* Don't display unselected `<option>` elements inside `<select>`
  dropdowns.

* Use CSS triangles to give `<select>` dropdowns a down arrow in order
  to make them look as intended.

* Use borders instead of `( )` and `[ ]` for radio buttons and check
  boxes, respectively.

Improves facebook.com and IMDB.
---
 resources/servo.css                               | 15 ++++++++++-----
 .../the-select-element-0/option-label.html.ini    |  5 -----
 2 files changed, 10 insertions(+), 10 deletions(-)
 delete mode 100644 tests/wpt/metadata/html/rendering/bindings/the-select-element-0/option-label.html.ini

diff --git a/resources/servo.css b/resources/servo.css
index 143dad0bbbe..fa71579187f 100644
--- a/resources/servo.css
+++ b/resources/servo.css
@@ -9,11 +9,16 @@ input[type="hidden"]    { display: none !important }
 input[type="checkbox"],
 input[type="radio"]     { font-family: monospace !important; border: none !important; background: transparent; }
 
-input[type="checkbox"]::before { content: "[ ]"; padding: 0; }
-input[type="checkbox"]:checked::before { content: "[✓]"; }
-input[type="checkbox"]:indeterminate::before { content: "[-]"; }
-input[type="radio"]::before { content: "( )"; padding: 0; }
-input[type="radio"]:checked::before { content: "(●)"; }
+input[type="checkbox"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; text-align: center; }
+input[type="checkbox"]:checked::before { content: "✓"; }
+input[type="checkbox"]:indeterminate::before { content: "-"; }
+input[type="radio"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; border-radius: 50%; text-align: center; }
+input[type="radio"]:checked::before { content: "●"; line-height: 1em; }
+
+select                  { border-style: solid; border-width: 1px; padding: 0.25em 0.5em; border-radius: 6px; background: white; }
+select::after           { content: ""; display: inline-block; border-width: 5.2px 3px 0 3px; border-style: solid; border-color: currentcolor transparent transparent transparent; margin-left: 0.5em; }
+option                  { display: none !important }
+option[selected]        { display: inline !important }
 
 td[align="left"]    { text-align: left; }
 td[align="center"]  { text-align: center; }
diff --git a/tests/wpt/metadata/html/rendering/bindings/the-select-element-0/option-label.html.ini b/tests/wpt/metadata/html/rendering/bindings/the-select-element-0/option-label.html.ini
deleted file mode 100644
index b01be9141ca..00000000000
--- a/tests/wpt/metadata/html/rendering/bindings/the-select-element-0/option-label.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[option-label.html]
-  type: reftest
-  reftype: ==
-  refurl: /html/rendering/bindings/the-select-element-0/option-label-ref.html
-  expected: FAIL