Update the HTML source to use the CSS3 syntax for gradients.

BUG=None
TEST=None

Review URL: http://codereview.chromium.org/6079010

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@70528 0039d316-1c4b-4281-b951-d872f2087c98

30 files changed, 149 insertions, 296 deletions

diff --git a/chrome/browser/resources/extensions_infobar.css b/chrome/browser/resources/extensions_infobar.css
index dcf4303..b451818 100644
--- a/chrome/browser/resources/extensions_infobar.css
+++ b/chrome/browser/resources/extensions_infobar.css
@@ -3,8 +3,7 @@
  */

 

 body {

-  background: -webkit-gradient(linear, left top, left bottom,

-              from(#DAE7F9), to(#B5CBE8));

+  background: -webkit-linear-gradient(#DAE7F9, #B5CBE8);

   font-family: Segoe UI, Tahoma;

   font-size: 11px;

   height: 36px; /* Infobars are limited to 36-72px */

diff --git a/chrome/browser/resources/extensions_infobar_mac.css b/chrome/browser/resources/extensions_infobar_mac.css
index 92a130e..6ce98f3 100644
--- a/chrome/browser/resources/extensions_infobar_mac.css
+++ b/chrome/browser/resources/extensions_infobar_mac.css
@@ -3,8 +3,7 @@
  */
 
 body {
-  background: -webkit-gradient(linear, left top, left bottom,
-              from(#EBEBEB), to(#CFCFCF));
+  background: -webkit-linear-gradient(#EBEBEB, #CFCFCF);
   font-family: 'Lucida Grande', Helvetica, sans-serif;
   font-size: 12px;
   height: 36px; /* Infobars are limited to 36-72px */
diff --git a/chrome/browser/resources/filebrowse.html b/chrome/browser/resources/filebrowse.html
index e6fb44e..078b7a2 100644
--- a/chrome/browser/resources/filebrowse.html
+++ b/chrome/browser/resources/filebrowse.html
@@ -15,11 +15,7 @@ div.header {
   height: 32px;
   position: absolute;
   box-sizing: border-box;
-  background-image: -webkit-gradient(linear,
-                                     left top,
-                                     left bottom,
-                                     from(#D0DAF8),
-                                     to(#A6BAF7));
+  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
   border-bottom-color: #999;
   border-bottom-width: 1px;
   border-left-color: #999;
@@ -55,11 +51,7 @@ div.header {
   border-top-width: 1px;
   padding-top: 6px;
   padding-left: 10px;
-  background-image: -webkit-gradient(linear,
-                                     left top,
-                                     left bottom,
-                                     from(#D0DAF8),
-                                     to(#A6BAF7));
+  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
 }
 .deleteYesNoContainer {
   display: -webkit-box;
@@ -323,20 +315,12 @@ div.controlbutton {
   cursor: pointer;
   padding: 4px;
   padding-bottom: 0;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#F4F6FB),
-                               to(#CCD7F8));
+  background: -webkit-linear-gradient(#F4F6FB, #CCD7F8);
 }
 
 div.controlbutton:hover {
 
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#FFF),
-                               to(#D9E0F6));
+  background: -webkit-linear-gradient(#FFF, #D9E0F6);
 }
 
 div.column {
@@ -457,11 +441,7 @@ div.opencontainer {
   left: 0;
   height: 30px;
   position: absolute;
-  background-image: -webkit-gradient(linear,
-                                     0% 0%,
-                                     0% 90%,
-                                     from(#fcfcfc),
-                                     to(#eff1f2));
+  background-image: -webkit-linear-gradient(#fcfcfc, #eff1f2 90%);
 }
 
 div.savecontainer {
@@ -470,11 +450,7 @@ div.savecontainer {
   left: 0;
   height: 60px;
   position: absolute;
-  background-image: -webkit-gradient(linear,
-                                     0% 0%,
-                                     0% 90%,
-                                     from(#fcfcfc),
-                                     to(#eff1f2));
+  background-image: -webkit-linear-gradient(#fcfcfc, #eff1f2 90%);
 }
 
 div.container {
diff --git a/chrome/browser/resources/host_registration_page.html b/chrome/browser/resources/host_registration_page.html
index 4b7d75f..058c4c0 100644
--- a/chrome/browser/resources/host_registration_page.html
+++ b/chrome/browser/resources/host_registration_page.html
@@ -13,7 +13,7 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background: -webkit-gradient(linear, left top, left bottom, from(#FAFBFB), to(#CCD1D4));
+  background: -webkit-linear-gradient(#FAFBFB, #CCD1D4);
 }
 
 </style>
@@ -32,23 +32,23 @@ function $(o) {
   return document.getElementById(o);
 }
 
-function processMessage(e) {  
+function processMessage(e) {
   if (e.data.domain != registrationUrl){
     skipRegistration();
     return;
-  }    
- 
+  }
+
   if (e.data.type == 'get_user_info') {
-    chrome.send('getUserInfo', []);  
+    chrome.send('getUserInfo', []);
   } else if (e.data.type == 'complete_registration') {
     location.replace(e.data.payload.registration_status ? registerDoneUrl :
-                                                          registerSkipUrl);    
+                                                          registerSkipUrl);
   }
 }
 
 function setRegistrationUrl(url) {
-  registrationUrl = url;     
-  $('form').contentWindow.location.href = url;   
+  registrationUrl = url;
+  $('form').contentWindow.location.href = url;
 }
 
 function setUserInfo(userInfo) {
@@ -57,7 +57,7 @@ function setUserInfo(userInfo) {
     domain: hostPageDomain,
     payload: userInfo
   };
-  $('form').contentWindow.postMessage(msg, registrationUrl);  
+  $('form').contentWindow.postMessage(msg, registrationUrl);
 }
 
 // Called by DOMUI handler when startup manifest is not defined.
diff --git a/chrome/browser/resources/imageburner.html b/chrome/browser/resources/imageburner.html
index 365143d..a90aaef 100644
--- a/chrome/browser/resources/imageburner.html
+++ b/chrome/browser/resources/imageburner.html
@@ -4,19 +4,15 @@
 <meta charset=UTF-8">
 <title i18n-content="title"></title>
 <style>
-body {  
+body {
   -webkit-user-select: none;
 }
-  
+
 h1 {
   border-bottom: 1px solid #7289E2;
   padding: 8px;
   height: 32px;
-  background-image: -webkit-gradient(linear,
-                                     left top,
-                                     left bottom,
-                                     from(#D0DAF8),
-                                     to(#A6BAF7));
+  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
   border: 1px solid #999;
   border-top: 0;
   color: black;
@@ -25,13 +21,9 @@ h1 {
 html[dir='rtl'] h1 {
   left: auto;
   right: 0;
-  background-image: -webkit-gradient(linear,
-                                     right top,
-                                     right bottom,
-                                     from(#D0DAF8),
-                                     to(#A6BAF7));
+  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
 }
- 
+
 .rowlink {
   height: 100%;
   -webkit-margin-end: 2px;
@@ -161,7 +153,7 @@ progress {
 }
 
 #statusColumn:not(.burningColumn) {
-  height: 50%; 
+  height: 50%;
   border-top: 1px solid #7289E2;
 }
 </style>
@@ -196,11 +188,11 @@ function burnSuccessful() {
 function burnUnsuccessful(){
   alert(localStrings.getString('burnUnsuccessfulMessage'));
 }
-  
+
 function rootsChanged(){
   chrome.send('getRoots', []);
 }
-  
+
 function browseFileResult(info, results) {
   var path = info.path;
   var list = $('rootsList');
@@ -240,12 +232,12 @@ function createProgressElement(id) {
   var statusDiv = document.createElement('div');
   statusDiv.id = id;
   statusDiv.className = 'statusDiv';
-  
+
   var statusText = document.createElement('div');
   statusText.id = id + 'StatusText';
   statusText.className = 'statusText';
   statusDiv.appendChild(statusText);
-  
+
   var progressBar = document.createElement('progress');
   progressBar.id = id + 'ProgressBar';
   progressBar.className = 'progressBar';
@@ -255,7 +247,7 @@ function createProgressElement(id) {
   progressText.id = id + 'ProgressText';
   progressText.className = 'progressText'
   statusDiv.appendChild(progressText);
-  
+
   return statusDiv;
 }
 
@@ -275,21 +267,21 @@ function setProgressElementFinalValues(element, statuses, event) {
         progressTextDiv = element.children[i];
         break;
     }
-  }  
+  }
   if (event == 'COMPLETE')
     statusTextDiv.textContent = statuses['finished'];
   else
       statusTextDiv.textContent = statuses['canceled'];
-      
+
   var progressBarParent = progressBarDiv.parentNode;
-  progressBarParent.removeChild(progressBarDiv); 
-  
+  progressBarParent.removeChild(progressBarDiv);
+
   var progressTextParent = progressTextDiv.parentNode;
   progressTextParent.removeChild(progressTextDiv);
   return element;
 }
 
-function setProgressElementValues(element, statuses, amountFinished, 
+function setProgressElementValues(element, statuses, amountFinished,
                                   amountTotal, progressText){
   var statusTextDiv;
   var progressBarDiv;
@@ -306,10 +298,10 @@ function setProgressElementValues(element, statuses, amountFinished,
         progressTextDiv = element.children[i];
         break;
     }
-  }  
- 
+  }
+
   if (!(amountFinished > 0)) {
-    amountFinished = 0; 
+    amountFinished = 0;
     statusTextDiv.textContent = statuses["start"];
     progressTextDiv.textContent = "";
   } else {
@@ -320,7 +312,7 @@ function setProgressElementValues(element, statuses, amountFinished,
     amountFinished = amountTotal;
   progressBarDiv.value = amountFinished;
   if (amountTotal)
-    progressBarDiv.max = amountTotal;  
+    progressBarDiv.max = amountTotal;
   return element;
 }
 
@@ -333,20 +325,20 @@ function updateProgressElement(progressType, progressInfo) {
   }
   var errorOccurred = (progressInfo.state == 'CANCELLED');
   if (progressInfo.state == 'IN_PROGRESS') {
-    setProgressElementValues(element, statusMessages[progressType],  
-        progressInfo.received, progressInfo.total, 
-        progressInfo.progress_status_text); 
+    setProgressElementValues(element, statusMessages[progressType],
+        progressInfo.received, progressInfo.total,
+        progressInfo.progress_status_text);
   } else {
     setProgressElementFinalValues(element, statusMessages[progressType],
                                   progressInfo.state);
-  }   
+  }
 }
 
-function downloadUpdated(result) { 
+function downloadUpdated(result) {
   updateProgressElement('download', result);
 }
 
-function burnProgressUpdated(result) { 
+function burnProgressUpdated(result) {
   if (!burnStarted) {
     $('rootsList').style.display = 'none';
     $('rootsListTitle').textContent = result.path;
@@ -398,26 +390,26 @@ function clearList(list) {
     list.removeChild(list.firstChild);
   }
 }
-  
+
 document.addEventListener('DOMContentLoaded', function() {
-  localStrings = new LocalStrings();    
+  localStrings = new LocalStrings();
   burnStarted = false;
   chrome.send("getRoots", []);
 
-  // Initialize messages that will be displayed as download 
+  // Initialize messages that will be displayed as download
   // or burn progress is updated.
   statusMessages = [];
-  
+
   var downloadStatuses = [];
   downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
-  downloadStatuses['inProgress'] = 
+  downloadStatuses['inProgress'] =
       localStrings.getString('downloadStatusInProgress');
-  downloadStatuses['finished'] = 
+  downloadStatuses['finished'] =
       localStrings.getString('downloadStatusComplete');
-  downloadStatuses['canceled'] = 
+  downloadStatuses['canceled'] =
       localStrings.getString('downloadStatusCanceled');
   statusMessages['download'] = downloadStatuses;
-  
+
   var burnStatuses = [];
   burnStatuses['start'] = localStrings.getString('burnStatusStart');
   burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
@@ -430,12 +422,12 @@ document.addEventListener('DOMContentLoaded', function() {
 <body>
   <div id="main" class="fullcontainer">
     <div id="rootsColumn" class="columnlist">
-      <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>  
+      <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>
       <div id="rootsList"></div>
     </div>
     <div id="statusColumn" class="columnlist">
       <div id="statusList"></div>
-    </div>  
+    </div>
   </div>
 </body>
 </html>
diff --git a/chrome/browser/resources/keyboard_overlay.css b/chrome/browser/resources/keyboard_overlay.css
index 2827254..239cb4e1 100644
--- a/chrome/browser/resources/keyboard_overlay.css
+++ b/chrome/browser/resources/keyboard_overlay.css
@@ -7,15 +7,13 @@ body {
 
 .keyboard-overlay-keyboard {
   border-radius: 6px;
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#484848), to(#252525)) no-repeat;
+  background: -webkit-linear-gradient(#484848, #252525) no-repeat;
   font-family: 'Droid Sans', Arial;
 }
 
 .keyboard-overlay-instructions {
   border-radius: 5px;
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#334c7e), to(#0d172b));
+  background: -webkit-linear-gradient(#334c7e, #0d172b);
   border: 2px solid #576ccf;
   color: #fff;
   display: table;
@@ -44,9 +42,8 @@ body {
 }
 
 .keyboard-overlay-key.is-shortcut {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(rgba(61, 61, 61, 0.8)),
-                               to(rgba(27, 27, 27, 0.8)));
+  background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8),
+                                      rgba(27, 27, 27, 0.8));
   color: #9e9e9e;
 }
 
@@ -85,63 +82,51 @@ body {
 }
 
 .keyboard-overlay-key.pressed.is-shift {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#44a142), to(#3e5f37));
+  background: -webkit-linear-gradient(#44a142, #3e5f37);
 }
 
 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#42a143), to(#2e5c53));
+  background: -webkit-linear-gradient(#42a143, #2e5c53);
 }
 
 .keyboard-overlay-key.pressed.is-shift.modifier-alt {
-  background: -webkit-gradient(linear, left top, right bottom,
-                               from(#45a343), to(#515134));
+  background: -webkit-linear-gradient(#45a343, #515134);
 }
 
 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt {
-  background: -webkit-gradient(linear, left top, right bottom,
-                               from(#52a12a), to(#4f4d2e));
+  background: -webkit-linear-gradient(#52a12a, #4f4d2e);
 }
 
 .keyboard-overlay-key.pressed.is-ctrl {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#1f37a2), to(#19265a));
+  background: -webkit-linear-gradient(#1f37a2, #19265a);
 }
 
 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#439fa5), to(#1e3760));
+  background: -webkit-linear-gradient(#439fa5, #1e3760);
 }
 
 .keyboard-overlay-key.pressed.is-ctrl.modifier-alt {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#733690), to(#22255e));
+  background: -webkit-linear-gradient(#733690, #22255e);
 }
 
 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#733690), to(#21255d));
+  background: -webkit-linear-gradient(#733690, #21255d);
 }
 
 .keyboard-overlay-key.pressed.is-alt {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#842c2a), to(#541e1c));
+  background: -webkit-linear-gradient(#842c2a, #541e1c);
 }
 
 .keyboard-overlay-key.pressed.is-alt.modifier-shift {
-  background: -webkit-gradient(linear, left top, right bottom,
-                               from(#745e31), to(#55241e));
+  background: -webkit-linear-gradient(top left, #745e31, #55241e);
 }
 
 .keyboard-overlay-key.pressed.is-alt.modifier-ctrl {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(#76368f), to(#522128));
+  background: -webkit-linear-gradient(#76368f, #522128);
 }
 
 .keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl {
-  background: -webkit-gradient(linear, left top, right bottom,
-                               from(#735f29), to(#50241b));
+  background: -webkit-linear-gradient(top left, #735f29, #50241b);
 }
 
 .keyboard-overlay-shortcut-text {
diff --git a/chrome/browser/resources/login_ui.css b/chrome/browser/resources/login_ui.css
index bb8a66a..864001d 100644
--- a/chrome/browser/resources/login_ui.css
+++ b/chrome/browser/resources/login_ui.css
@@ -1,8 +1,7 @@
 body {
-  background: -webkit-gradient(
-    radial, 50% 50%, 5, 50% 50%, 1000,
-    from(darkblue), to(black)
-  );
+  background: -webkit-radial-gradient(circle contain,
+                                      darkblue 5px,
+                                      black 1000px);
   font-family: 'Times New Roman';
   font-size: 15px;
 }
diff --git a/chrome/browser/resources/mediaplayer.html b/chrome/browser/resources/mediaplayer.html
index effa78b..094a263 100644
--- a/chrome/browser/resources/mediaplayer.html
+++ b/chrome/browser/resources/mediaplayer.html
@@ -25,11 +25,7 @@ body {
   height: 8px;
   opacity: .4;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left bottom,
-                               left top,
-                               from(white),
-                               to(transparent));
+  background: -webkit-linear-gradient(transparent, white);
 }
 
 .audiotitle {
@@ -61,11 +57,7 @@ body {
   opacity: .9;
   right: 0;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#323232),
-                               to(#070707));
+  background: -webkit-linear-gradient(#323232, #070707);
 }
 
 .sliderback {
@@ -75,11 +67,7 @@ body {
   height: 5px;
   position: absolute;
   border-radius: 3px;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#ced9fa),
-                               to(#e8ecf9));
+  background: -webkit-linear-gradient(#ced9fa, #e8ecf9);
   border: 1px solid #ffffff;
 }
 
@@ -91,11 +79,7 @@ body {
   border-radius: 3px;
   border: 1px solid #9ca5b7;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#4a5d84),
-                               to(#232c3d));
+  background: -webkit-linear-gradient(#4a5d84, #232c3d);
 }
 
 .sliderloaded {
@@ -117,11 +101,7 @@ body {
   opacity: .9;
   right: 0;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#323232),
-                               to(#070707));
+  background: -webkit-linear-gradient(#323232, #070707);
 }
 
 .soundbutton {
@@ -154,11 +134,7 @@ body {
   right: 30px;
   z-index: 99999;
   background: black;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#323232),
-                               to(#070707));
+  background: -webkit-linear-gradient(#323232, #070707);
 }
 
 .fullscreen {
@@ -286,11 +262,7 @@ body {
 }
 
 .controlbutton:hover {
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#6a7eac),
-                               to(#000000));
+  background: -webkit-linear-gradient(#6a7eac, #000);
 }
 
 .icon {
@@ -358,7 +330,7 @@ function onLoadedProgress(e) {
 
 function onMediaError(e) {
   console.log('Got new error' + e);
-  chrome.send('playbackError', ['Error playing back', 
+  chrome.send('playbackError', ['Error playing back',
       currentPlaylist[currentItem].path]);
   if (currentPlaylist.length == 1) {
     $('error').textContent = localStrings.getString('errorstring');
diff --git a/chrome/browser/resources/menu.css b/chrome/browser/resources/menu.css
index 43ea18a..16ade9f 100644
--- a/chrome/browser/resources/menu.css
+++ b/chrome/browser/resources/menu.css
@@ -1,7 +1,5 @@
 body {
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(white),
-                               to(#EEE));
+  background: -webkit-linear-gradient(white, #EEE);
   cursor: default;
   margin: 0;
   -webkit-user-select: none;
@@ -47,8 +45,9 @@ body {
 }
 
 .separator {
-  background: -webkit-gradient(linear, 0 0, 96% 0, from(rgba(0, 0, 0, .10)),
-                               to(rgba(0, 0, 0, .02)));
+  background: -webkit-linear-gradient(left,
+                                      rgba(0, 0, 0, .10),
+                                      rgba(0, 0, 0, .02) 96%);
   border: 0;
   height: 1px;
   margin: 4px 0;
@@ -91,4 +90,3 @@ body {
 .hidden {
   display: none;
 }
-
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 1716fb4..44ca39c 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -206,9 +206,7 @@ html[dir=rtl] .item {
   border: 1px solid rgb(118, 118, 118);
   border-radius: 3px;
   padding: 0 3px;
-  background: -webkit-gradient(linear, left top, left bottom,
-                               from(white),
-                               to(rgb(228, 229, 240)));
+  background: -webkit-linear-gradient(white, rgb(228, 229, 240));
   width: auto;
   max-width: 300px;
 }
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 315b54b..da3740d 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -516,23 +516,22 @@ function updateMask(maxiview, visibleHeightPx) {
   var third = fourth - gradientHeightPx / window.innerHeight;
 
   var gradientArguments = [
-    'linear',
-    '0 0',
-    '0 100%',
-    'from(transparent)',
+    'transparent',
     getColorStopString(first, 'transparent'),
     getColorStopString(second, gradientDestination),
     getColorStopString(third, gradientDestination),
     getColorStopString(fourth, 'transparent'),
-    'to(transparent)'
+    'transparent'
   ];
 
-  var gradient = '-webkit-gradient(' + gradientArguments.join(', ') + ')';
+  var gradient = '-webkit-linear-gradient(' + gradientArguments.join(',') + ')';
   maxiview.style.WebkitMaskImage = gradient;
 }
 
 function getColorStopString(height, color) {
-  return 'color-stop(' + height + ', ' + color + ')';
+  // TODO(arv): The CSS3 gradient syntax allows px units so we should simplify
+  // this to use pixels instead.
+  return color + ' ' + height * 100 + '%';
 }
 
 window.addEventListener('resize', handleWindowResize);
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 77b53b0..e2add06 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -52,9 +52,9 @@ body {
 .thumbnail-container:focus .edit-bar,
 .thumbnail-container:hover .edit-bar {
   background-color: $6; /* COLOR_NTP_HEADER */
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     from($7), /* color_header_gradient_light */
-                                     to($6)); /* COLOR_NTP_HEADER */
+  background-image: -webkit-linear-gradient(
+                        $7, /* COLOR_HEADER_GRADIENT_LIGHT */
+                        $6); /* COLOR_NTP_HEADER */
 }
 .thumbnail-container:hover > .edit-mode-border {
   background-color: $6; /* COLOR_NTP_HEADER */
diff --git a/chrome/browser/resources/ntp/most_visited.css b/chrome/browser/resources/ntp/most_visited.css
index 44933b1..2f875e2 100644
--- a/chrome/browser/resources/ntp/most_visited.css
+++ b/chrome/browser/resources/ntp/most_visited.css
@@ -100,9 +100,8 @@
 
   /* We need background-color as well to get the fade out animation correct */
   background-color: hsl(213, 66%, 57%);
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     from(hsl(213, 87%, 67%)),
-                                     to(hsl(213, 66%, 57%)));
+  background-image: -webkit-linear-gradient(hsl(213, 87%, 67%),
+                                            hsl(213, 66%, 57%));
 }
 
 .edit-bar > .spacer {
@@ -198,11 +197,9 @@ html[dir=rtl] .thumbnail-container > .title > div {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 
-  background-image: -webkit-gradient(linear, left top, left bottom,
-    from(hsla(0, 0%, 0%, 0)),
-    color-stop(0.85, hsla(0, 0%, 47%, 0)),
-    to(hsla(0, 0%, 47%, 0.2))
-    );
+  background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0),
+                                            hsla(0, 0%, 47%, 0) 85%,
+                                            hsla(0, 0%, 47%, 0.2));
 
   /* delay border radius transition as much as the edit bar slide delay */
   -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0;
diff --git a/chrome/browser/resources/offline_load.html b/chrome/browser/resources/offline_load.html
index a9756bd..9a06022 100644
--- a/chrome/browser/resources/offline_load.html
+++ b/chrome/browser/resources/offline_load.html
@@ -10,13 +10,7 @@ html {
 body {
   color: #000;
   font-family: Helvetica, Arial, sans-serif;
-  background-image: -webkit-gradient(
-      linear,
-      left bottom,
-      left top,
-      color-stop(0, rgb(236,244,255)),
-      color-stop(0.50, rgb(255,255,255))
-  );
+  background-image: -webkit-linear-gradient(white 50%, rgb(236, 244, 255));
   height: 100%;
   padding: 0;
   margin: 0;
diff --git a/chrome/browser/resources/options/chromeos_internet_options_page.css b/chrome/browser/resources/options/chromeos_internet_options_page.css
index 82e1fc2d..d2ba4448a 100644
--- a/chrome/browser/resources/options/chromeos_internet_options_page.css
+++ b/chrome/browser/resources/options/chromeos_internet_options_page.css
@@ -53,8 +53,8 @@
 }
 
 .network-item[connected] {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-      from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
+                                            rgba(255, 255, 255, 0));
   background-color: hsl(214,91%,89%);
   border-color: hsl(214, 91%, 65%);
 }
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index fd0694e..47447f4 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -118,17 +118,8 @@ html[toolkit=views] .button-strip {
 
 #navbar-container {
   -webkit-border-end: 1px solid #c6c9ce;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(rgba(234, 238, 243, 0)),
-                               to(#eaeef3)),
-              -webkit-gradient(linear,
-                               left top,
-                               right top,
-                               from(#eaeef3),
-                               color-stop(0.97, #eaeef3),
-                               to(#d3d7db));
+  background: -webkit-linear-gradient(rgba(234, 238, 243, 0), #eaeef3),
+              -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
   bottom: 0;
   cursor: pointer;
   display: none;
@@ -140,18 +131,10 @@ html[toolkit=views] .button-strip {
 }
 
 html[dir='rtl'] #navbar-container {
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(rgba(255, 255, 255, 0)),
-                               color-stop(0.7, rgba(255, 255, 255, 0)),
-                               to(white)),
-              -webkit-gradient(linear,
-                               right top,
-                               left top,
-                               from(white),
-                               color-stop(0.8, white),
-                               to(#f3f3f3));
+  background: -webkit-linear-gradient(rgba(255, 255, 255, 0)),
+                                      rgba(255, 255, 255, 0) 70%,
+                                      white),
+              -webkit-linear-gradient(right, white, white 80%, #f3f3f3);
   left: auto;
   right: 0;
 }
@@ -255,12 +238,7 @@ html[hide-menu=true] #mainview {
 }
 
 #managed-prefs-banner {
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#fff2b7),
-                               color-stop(0.97, #fae691),
-                               to(#878787));
+  background: -webkit-linear-gradient(#fff2b7, #fae691 97%, #878787);
   height: 31px;
   width: 100%;
 }
diff --git a/chrome/browser/resources/options/subpages_tab_controls.css b/chrome/browser/resources/options/subpages_tab_controls.css
index c9eb94d..5d74b6e 100644
--- a/chrome/browser/resources/options/subpages_tab_controls.css
+++ b/chrome/browser/resources/options/subpages_tab_controls.css
@@ -51,11 +51,7 @@ html[dir=rtl] .subpages-nav-tabs .inactive-tab-label {
 .subpages-nav-tabs {
   padding: 4px;
   border-bottom: 1px solid #A0A0A0;  /* light gray */
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(white),
-                               to(#F3F3F3));  /* very light gray */
+  background: -webkit-linear-gradient(white, #F3F3F3);  /* very light gray */
   margin-bottom: 15px;
 }
 
diff --git a/chrome/browser/resources/print_preview.css b/chrome/browser/resources/print_preview.css
index f338b98..f56a3cb 100644
--- a/chrome/browser/resources/print_preview.css
+++ b/chrome/browser/resources/print_preview.css
@@ -39,11 +39,7 @@ body {
 }
 
 #separator {
-  background: -webkit-gradient(linear,
-                               left top,
-                               right top,
-                               from(#a4a4a4),
-                               to(#ccc));
+  background: -webkit-linear-gradient(left, #a4a4a4, #ccc);
   height: 100%;
   width: 6px;
 }
diff --git a/chrome/browser/resources/safe_browsing_malware_block.html b/chrome/browser/resources/safe_browsing_malware_block.html
index 0dd7952..7cc5a19 100644
--- a/chrome/browser/resources/safe_browsing_malware_block.html
+++ b/chrome/browser/resources/safe_browsing_malware_block.html
@@ -71,7 +71,7 @@ input {
 
 
 .green {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c));
+  background: -webkit-linear-gradient(#83c260, #71b44c 44%, #549d2c);
   border: 1px solid #4c7336;
   border-bottom: 1px solid #44692f;
   border-radius: 3px;
@@ -90,14 +90,14 @@ input {
 }
 
 .green:hover, .green:focus {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bc968), color-stop(44%,#7bbc57), color-stop(100%,#4f9727)); /* webkit */
+  background: -webkit-linear-gradient(#8bc968, #7bbc57 44%, #4f9727);
   border: 1px solid #456a2f;
   border-bottom: 1px solid #456a2f;
   -webkit-box-shadow: inset 0 1px 0 0 #a0d186, 0px 1px 2px rgba(0,0,0,0.3);;
 }
 
 .green:active {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c)); /* webkit */
+  background: -webkit-linear-gradient(#83c260, #71b44c 44%, #549d2c);
   border: 1px solid #3e612a;
   border-top:1px solid #4c7336;
   border-bottom:1px solid #547b3f;
diff --git a/chrome/browser/resources/safe_browsing_phishing_block.html b/chrome/browser/resources/safe_browsing_phishing_block.html
index 52ca6a8..448548e 100644
--- a/chrome/browser/resources/safe_browsing_phishing_block.html
+++ b/chrome/browser/resources/safe_browsing_phishing_block.html
@@ -67,7 +67,7 @@ html[dir='rtl'] .helpbutton {
 }
 
 .green {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c));
+  background: -webkit-linear-gradient(#83c260, #71b44c 44%, #549d2c);
   border: 1px solid #4c7336;
   border-bottom: 1px solid #44692f;
   border-radius: 3px;
@@ -86,14 +86,14 @@ html[dir='rtl'] .helpbutton {
 }
 
 .green:hover, .green:focus {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bc968), color-stop(44%,#7bbc57), color-stop(100%,#4f9727)); /* webkit */
+  background: -webkit-linear-gradient(#8bc968, #7bbc57 44%, #4f9727);
   border: 1px solid #456a2f;
   border-bottom: 1px solid #456a2f;
   -webkit-box-shadow: inset 0 1px 0 0 #a0d186, 0px 1px 2px rgba(0,0,0,0.3);;
 }
 
 .green:active {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c)); /* webkit */
+  background: -webkit-linear-gradient(#83c260, #71b44c 44%, #549d2c);
   border: 1px solid #3e612a;
   border-top:1px solid #4c7336;
   border-bottom:1px solid #547b3f;
diff --git a/chrome/browser/resources/shared/css/button.css b/chrome/browser/resources/shared/css/button.css
index 1d1c25a..ca48855 100644
--- a/chrome/browser/resources/shared/css/button.css
+++ b/chrome/browser/resources/shared/css/button.css
@@ -3,13 +3,11 @@ button {
   border: 1px solid rgba(0, 0, 0, .50);
   border-radius: 3px;
   -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .10);
-  background: -webkit-gradient(linear, 0 50%, 0 100%,
-                               from(#ffffff), to(#e3e3e3));
+  background: -webkit-linear-gradient(#fff 50%, #e3e3e3);
 }
 
 button:active {
-  background: -webkit-gradient(linear, 0 4%, 0 100%,
-                               from(#c3c3c3), to(#f5f5f5));
+  background: -webkit-linear-gradient(#c3c3c3 4%, #f5f5f5);
 }
 
 button:focus {
@@ -23,8 +21,7 @@ button.action {
   border: 1px solid #2e4987;
   font-weight: bold;
   color: #ffffff;
-  background: -webkit-gradient(linear, 0 0, 0 100%,
-                               from(#6391de), to(#426dc9));
+  background: -webkit-linear-gradient(#6391de, #426dc9);
 }
 
 button.action:focus {
@@ -35,13 +32,11 @@ button.action:focus {
 
 /* make sure we do not use active when disabled */
 button.action:active:not(:disabled) {
-  background: -webkit-gradient(linear, 0 0, 0 100%,
-                               from(#426dc9), to(#6391de));
+  background: -webkit-linear-gradient(#426dc9, #6391de);
 }
 
 button:disabled {
   border: 1px solid rgba(0, 0, 0, .35);
   color: rgba(0, 0, 0, .30);
-  background: -webkit-gradient(linear, 0 0, 0 100%,
-                               from(#ffffff), to(#e3e3e3));
+  background: -webkit-linear-gradient(#fff, #e3e3e3);
 }
diff --git a/chrome/browser/resources/shared/css/list.css b/chrome/browser/resources/shared/css/list.css
index 15be68ea..bcbc2ab 100644
--- a/chrome/browser/resources/shared/css/list.css
+++ b/chrome/browser/resources/shared/css/list.css
@@ -43,8 +43,8 @@ list:not([disabled]) > :hover {
 }
 
 list > [selected] {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-      from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
+                                            rgba(255, 255, 255, 0));
 }
 
 list > [selected] {
diff --git a/chrome/browser/resources/shared/css/menu.css b/chrome/browser/resources/shared/css/menu.css
index 2aeac3e..b28af86 100644
--- a/chrome/browser/resources/shared/css/menu.css
+++ b/chrome/browser/resources/shared/css/menu.css
@@ -4,7 +4,7 @@ menu {
   border: 1px solid rgba(0, 0, 0, .50);
   -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .50);
   color: black;
-  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee));
+  background: -webkit-linear-gradient(#fff, #eee);
   left: 0;
   white-space: nowrap;
   padding: 8px 0;
@@ -34,8 +34,9 @@ menu > :not(hr) {
 }
 
 menu > hr {
-  background: -webkit-gradient(linear, 0 0, 96% 0, from(rgba(0, 0, 0, .10)),
-                               to(rgba(0, 0, 0, .02)));
+  background: -webkit-linear-gradient(left,
+                                      rgba(0, 0, 0, .10),
+                                      rgba(0, 0, 0, .02) 96%);
   border: 0;
   height: 1px;
   margin: 8px 0;
@@ -73,4 +74,4 @@ menu > [checked] {
 
 menu > [selected][checked]:active:before {
   content: url("../images/checkbox_white.png");
-}
\ No newline at end of file
+}
diff --git a/chrome/browser/resources/shared/css/tree.css b/chrome/browser/resources/shared/css/tree.css
index 5ea5f86..0b66262 100644
--- a/chrome/browser/resources/shared/css/tree.css
+++ b/chrome/browser/resources/shared/css/tree.css
@@ -69,8 +69,8 @@ html[dir=rtl] .expand-icon {
 
 */
 .tree-row[selected] {
-  background-image: -webkit-gradient(linear, left top, left bottom,
-      from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
+                                            rgba(255,255,255,0));
 }
 
 .tree-row[selected] {
@@ -150,4 +150,3 @@ html[dir=rtl] .tree-item[editing] input {
   margin: -2px -3px -2px -8px;
   padding: 1px 1px 1px 7px;
 }
-
diff --git a/chrome/browser/resources/slideshow.html b/chrome/browser/resources/slideshow.html
index 10ed4cb..b93d5ba 100644
--- a/chrome/browser/resources/slideshow.html
+++ b/chrome/browser/resources/slideshow.html
@@ -9,7 +9,7 @@ body {
   overflow: hidden;
   background: black;
 }
-                                   
+
 #glow {
   left: 0;
   right: 0;
@@ -17,11 +17,7 @@ body {
   height: 8px;
   opacity: .4;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left bottom,
-                               left top,
-                               from(white),
-                               to(transparent));
+  background: -webkit-linear-gradient(transparent, white);
 }
 
 #main {
@@ -45,11 +41,7 @@ body {
   -webkit-box-pack: center;
   display: -webkit-box;
   position: absolute;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#323232),
-                               to(#070707));
+  background: -webkit-linear-gradient(#323232, #070707);
 }
 
 #prevbutton > div {
@@ -103,11 +95,7 @@ button {
 }
 
 button:hover {
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#6a7eac),
-                               to(#000000));
+  background: -webkit-linear-gradient(#6a7eac, #000000);
 }
 
 </style>
diff --git a/chrome/common/extensions/docs/examples/apps/hello-php/main.css b/chrome/common/extensions/docs/examples/apps/hello-php/main.css
index 26f8eb4..109547d 100644
--- a/chrome/common/extensions/docs/examples/apps/hello-php/main.css
+++ b/chrome/common/extensions/docs/examples/apps/hello-php/main.css
@@ -11,8 +11,8 @@ nav {
   margin-bottom: 10px;
   padding: 10px;
   border-bottom: 1px solid #C6D2EB;
-  background: -moz-linear-gradient(top, #fff, #EEF1F9 60%, #EEF1F9);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#EEF1F9), color-stop(.6, #EEF1F9));
+  background: -moz-linear-gradient(#fff, #EEF1F9 60%, #EEF1F9);
+  background: -webkit-linear-gradient(#fff, #EEF1F9 60%, #EEF1F9);
   text-shadow: 1px 1px 1px #fff;
 }
 
@@ -87,4 +87,3 @@ li {
 #license-server-response span.no {
   color: red;
 }
-
diff --git a/chrome/common/extensions/docs/examples/extensions/irc/servlet/styles.css b/chrome/common/extensions/docs/examples/extensions/irc/servlet/styles.css
index 2964acd..3773dfa 100644
--- a/chrome/common/extensions/docs/examples/extensions/irc/servlet/styles.css
+++ b/chrome/common/extensions/docs/examples/extensions/irc/servlet/styles.css
@@ -11,14 +11,14 @@ body {
   height: 100%;

   width: 100%;

  }

- 

+

  #headerContainer {

   display: -webkit-box;

   height: 32px;

   -webkit-box-orient: horizontal;

   -webkit-box-align: stretch;

  }

- 

+

 #pageControls {

   position: absolute;

   right: 0px;

@@ -57,9 +57,8 @@ body {
   position: absolute;

   width: 80%;

   height: 100%;

-  background: -webkit-gradient(linear, left top, left bottom, 

-                               from(#aaaaaa), to(white));

-  -webkit-transition: margin 0.25s ease-in-out; 

+  background: -webkit-linear-gradient(#aaa, white);

+  -webkit-transition: margin 0.25s ease-in-out;

 }

 

 .channelSlide.far-left {

@@ -98,7 +97,7 @@ body {
   background-color: white;

   color: #999999;

   padding: 0px 6px 4px 6px;

-  height: 

+  height:

 }

 

 .channelSlideContainer {

@@ -144,7 +143,7 @@ body {
   margin: 10px;

   margin-left: 10%;

   bottom: 0px;

-  -webkit-box-shadow: 3px 3px 5px #888; 

+  -webkit-box-shadow: 3px 3px 5px #888;

 }

 

 #entryText {

@@ -156,6 +155,5 @@ body {
   font-family: "Lucida Console", Monospace;

   color: white;

   border: 0px;

-  background: #777777; 

+  background: #777777;

 }

-

diff --git a/chrome/renderer/resources/click_to_play_plugin.html b/chrome/renderer/resources/click_to_play_plugin.html
index 05969c6f..cd878f1 100644
--- a/chrome/renderer/resources/click_to_play_plugin.html
+++ b/chrome/renderer/resources/click_to_play_plugin.html
@@ -16,11 +16,11 @@ body {
 }
 
 body #outer:hover {
-  background: -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#a5a5a5));
+  background: -webkit-linear-gradient(#d2d2d2, #a5a5a5);
 }
 
 body #outer:active {
-  background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#d2d2d2));
+  background: -webkit-linear-gradient(#b9b9b9, #d2d2d2);
 }
 
 h1 {
diff --git a/chrome/renderer/resources/error_app.html b/chrome/renderer/resources/error_app.html
index 18265cef..5911e23 100644
--- a/chrome/renderer/resources/error_app.html
+++ b/chrome/renderer/resources/error_app.html
@@ -10,13 +10,8 @@ html {
 body {
   color: #000;
   font-family: Helvetica, Arial, sans-serif;
-  background-image: -webkit-gradient(
-      linear,
-      left bottom,
-      left top,
-      color-stop(0, rgb(236,244,255)),
-      color-stop(0.50, rgb(255,255,255))
-  );
+  background-image: -webkit-linear-gradient(rgb(255, 255, 255) 50%,
+                                            rgb(236, 244, 255));
   height: 100%;
   padding: 0px;
   margin: 0px;
diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html
index b017f48..6abe906 100644
--- a/chrome/renderer/resources/neterror.html
+++ b/chrome/renderer/resources/neterror.html
@@ -10,7 +10,7 @@ body {
   background-color: #CCC;
 }
 html[high-color-depth] body {
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCC), to(#AAA));
+  background: -webkit-linear-gradient(#CCC, #AAA);
   background-attachment: fixed;
 }
 #cell {