[css-logical] Replace uses of webkit-prefixed logical properties with standard ones in /ui/webui

Bug 850000 added standard logical properties and aliased prefixed ones
to them. The prefixed properties are still used in various places, but
the standard ones should be used instead. This patch replaces all the
uses in /ui/webeui

Spec: https://drafts.csswg.org/css-logical/#box

BUG=862141

Change-Id: I9c77c4374bef006fa518eba96f10db8e9bc9c2eb
Reviewed-on: https://chromium-review.googlesource.com/1146930Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#577360}

ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html

@@ -7,10 +7,10 @@
     <style include="cr-shared-style">
       /* .list-frame and .list-item match the styling in settings_shared_css. */
       .list-frame {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 60px;
         align-items: center;
         display: block;
+        padding-inline-end: 20px;
+        padding-inline-start: 60px;
       }
 
       .list-item {

ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html

@@ -17,9 +17,9 @@
       }
 
       .untrusted {
-        -webkit-margin-end: 16px;
         color: var(--paper-red-700);
         font-weight: 500;
+        margin-inline-end: 16px;
         text-transform: uppercase;
       }
 

ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html

@@ -75,7 +75,7 @@
       }
 
       paper-button.action-button {
-        -webkit-margin-start: 8px;
+        margin-inline-start: 8px;
       }
     </style>
     <!-- TODO(stevenjb/dschuyler): Find a solution to support i18n{} here -->

ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.html

@@ -13,7 +13,7 @@
     <style include="network-shared md-select iron-flex paper-button-style">
       /* Leave some space between button and select. */
       select {
-        -webkit-margin-start: 8px;
+        margin-inline-start: 8px;
       }
     </style>
     <div class="property-box first two-line">

ui/webui/resources/cr_components/chromeos/network/network_nameservers.html

@@ -13,13 +13,13 @@
   <template>
     <style include="network-shared md-select iron-flex">
       a {
-        -webkit-margin-start: 4px;
+        margin-inline-start: 4px;
       }
 
       cr-input {
-        /* Aligns with the start of cr-radio-button's text. */
-        -webkit-margin-start: 38px;
         margin-bottom: 4px;
+        /* Aligns with the start of cr-radio-button's text. */
+        margin-inline-start: 38px;
       }
 
       paper-radio-group {
@@ -29,14 +29,14 @@
 
       .nameservers {
         /* Aligns with the start of cr-radio-button's text. */
-        -webkit-margin-start: 38px;
+        margin-inline-start: 38px;
       }
 
       #radioGroupDiv {
-        -webkit-padding-end: var(--cr-section-padding);
-        -webkit-padding-start: var(--cr-section-padding);
         align-items: center;
         display: block;
+        padding-inline-end: var(--cr-section-padding);
+        padding-inline-start: var(--cr-section-padding);
       }
 
     </style>

ui/webui/resources/cr_components/chromeos/network/network_property_list.html

@@ -21,7 +21,7 @@
       }
 
       cr-policy-network-indicator {
-        -webkit-margin-start: var(--settings-controlled-by-spacing);
+        margin-inline-start: var(--settings-controlled-by-spacing);
       }
     </style>
     <template is="dom-repeat" items="[[fields]]"

ui/webui/resources/cr_components/chromeos/network/network_proxy.html

@@ -32,7 +32,7 @@
       }
 
       #manualProxy {
-        -webkit-padding-start: var(--cr-section-padding);
+        padding-inline-start: var(--cr-section-padding);
       }
     </style>
 

ui/webui/resources/cr_components/chromeos/network/network_shared_css.html

@@ -22,7 +22,7 @@
       }
 
       .property-box.indented {
-        -webkit-margin-start: var(--cr-section-padding);
+        margin-inline-start: var(--cr-section-padding);
       }
 
       .property-box.single-column {
@@ -45,9 +45,9 @@
       }
 
       .property-box > .middle {
-        -webkit-padding-start: 16px;
         align-items: center;
         flex: auto;
+        padding-inline-start: 16px;
       }
 
       .secondary {

ui/webui/resources/cr_components/chromeos/network/network_siminfo.html

@@ -22,7 +22,7 @@
       }
 
       iron-icon {
-       -webkit-margin-end: 10px;
+        margin-inline-end: 10px;
       }
 
       .dialog-error {
@@ -38,15 +38,15 @@
       }
 
       .separator {
-        -webkit-border-start: var(--cr-separator-line);
-        -webkit-margin-end: var(--cr-section-padding);
-        -webkit-margin-start: var(--cr-section-padding);
+        border-inline-start: var(--cr-separator-line);
         flex-shrink: 0;
         height: calc(var(--cr-section-min-height) - 9px);
+        margin-inline-end: var(--cr-section-padding);
+        margin-inline-start: var(--cr-section-padding);
       }
 
       cr-toggle {
-        -webkit-margin-start: var(--cr-button-edge-spacing);
+        margin-inline-start: var(--cr-button-edge-spacing);
       }
     </style>
 

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html

@@ -128,8 +128,8 @@
       }
 
       #switchMode {
-        -webkit-margin-end: 8px;
         background-image: url(videocam_icon.svg);
+        margin-inline-end: 8px;
       }
 
       :host([videomode]) #switchMode {

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html

@@ -58,9 +58,9 @@
 
       #discard button {
         --iron-icon-fill-color: white;
-        -webkit-margin-end: 0;
-        -webkit-margin-start: 0;
         border-radius: 50%;
+        margin-inline-end: 0;
+        margin-inline-start: 0;
       }
     </style>
     <div id="preview" hidden="[[!showImagePreview_(cameraActive_, imageSrc)]]">

ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html

@@ -20,7 +20,7 @@
       }
 
       #divOuter {
-        -webkit-padding-end: var(--cr-icon-ripple-padding);
+        padding-inline-end: var(--cr-icon-ripple-padding);
       }
 
       #divDetail {
@@ -30,11 +30,11 @@
       }
 
       #divText {
-        -webkit-margin-start: 20px;
         display: flex;
         flex: 1 0 auto;
         flex-direction: column;
         justify-content: center;
+        margin-inline-start: 20px;
       }
 
       #networkStateText {

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -111,8 +111,8 @@ List of customizable styles:
       }
 
       #label-container {
-        -webkit-padding-start: 20px;
         color: var(--cr-checkbox-label-color, var(--google-grey-900));
+        padding-inline-start: 20px;
         white-space: normal;
 
         @apply --cr-checkbox-label-container;

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -58,10 +58,10 @@
        * See https://crbug.com/846254 and associated CL for more information.
        */
       :host ::slotted([slot=body]) {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 20px;
         color: var(--cr-secondary-text-color);
         padding-bottom: 0;
+        padding-inline-end: 20px;
+        padding-inline-start: 20px;
         padding-top: 0;
         @apply --cr-dialog-body;
       }
@@ -75,13 +75,13 @@
        * See https://crbug.com/846254 and associated CL for more information.
        */
       :host ::slotted([slot=title]) {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 20px;
         color: var(--cr-primary-text-color);
         flex: 1;
         font-size: calc(15 / 13 * 100%);
         line-height: 1;
         padding-bottom: 16px;
+        padding-inline-end: 20px;
+        padding-inline-start: 20px;
         padding-top: 20px;
         @apply --cr-dialog-title;
       }
@@ -95,11 +95,11 @@
        * See https://crbug.com/846254 and associated CL for more information.
        */
       :host ::slotted([slot=button-container]) {
-        -webkit-padding-end: 16px;
-        -webkit-padding-start: 16px;
         display: flex;
         justify-content: flex-end;
         padding-bottom: 16px;
+        padding-inline-end: 16px;
+        padding-inline-start: 16px;
         padding-top: 24px;
         @apply --cr-dialog-button-container;
       }
@@ -153,8 +153,8 @@
           display: flex;
         };
 
-        -webkit-margin-end: 4px;
         align-self: flex-start;
+        margin-inline-end: 4px;
         margin-top: 4px;
 
         @apply --cr-dialog-close-image;

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

@@ -57,13 +57,13 @@
       }
 
       .drawer-header {
-        -webkit-padding-start: 24px;
         align-items: center;
         border-bottom: var(--cr-separator-line);
         display: flex;
         font-size: 123.08%;  /* go to 16px from 13px */
         min-height: 56px;
         outline: none;
+        padding-inline-start: 24px;
       }
 
       :host ::slotted(.drawer-content) {

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -36,7 +36,7 @@
 
       /* Margin between <input> and <paper-button> in the 'suffix' slot */
       :host ::slotted(paper-button[slot=suffix]) {
-        -webkit-margin-start: var(--cr-button-edge-spacing);
+        margin-inline-start: var(--cr-button-edge-spacing);
       }
 
       :host([invalid]) #label {

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -47,9 +47,6 @@
         font-size: inherit;
         line-height: inherit;
         outline: none;
-        text-align: inherit;
-        text-overflow: ellipsis;
-        width: 100%;
 
         /**
          * When using mixins, avoid using padding shorthand. Using both the
@@ -59,11 +56,15 @@
          *
          * See https://crbug.com/846254 and associated CL for more information.
          */
-        -webkit-padding-end: var(--cr-input-padding-end, 8px);
-        -webkit-padding-start: var(--cr-input-padding-start, 8px);
         padding-bottom: var(--cr-input-padding-bottom, 6px);
+        padding-inline-end: var(--cr-input-padding-end, 8px);
+        padding-inline-start: var(--cr-input-padding-start, 8px);
         padding-top: var(--cr-input-padding-top, 6px);
 
+        text-align: inherit;
+        text-overflow: ellipsis;
+        width: 100%;
+
         @apply --cr-input-input;
       }
 

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -43,9 +43,9 @@
       }
 
       #startIcon {
-        -webkit-padding-end: var(--cr-icon-button-margin-start);
         display: flex;
         flex-shrink: 0;
+        padding-inline-end: var(--cr-icon-button-margin-start);
         width: var(--cr-link-row-icon-width, var(--cr-icon-size));
       }
 

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

@@ -32,8 +32,8 @@
       }
 
       #labelWrapper {
-        -webkit-margin-start: var(--cr-radio-button-label-spacing, 20px);
         flex: 1;
+        margin-inline-start: var(--cr-radio-button-label-spacing, 20px);
 
         @apply --cr-radio-button-label;
       }

ui/webui/resources/cr_elements/cr_toast/cr_toast.html

@@ -34,10 +34,10 @@
       }
 
       :host ::slotted(paper-button) {
-        -webkit-margin-start: 32px;
         background-color: transparent;
         border: none;
         color: var(--google-blue-300);
+        margin-inline-start: 32px;
         min-width: 52px;
         padding: 8px;
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -19,26 +19,26 @@
       }
 
       h1 {
-        -webkit-margin-start: 6px;
-        -webkit-padding-end: 12px;
         flex: 1;
         font-size: 123%;
         font-weight: 400;
         letter-spacing: .25px;
         line-height: normal;
+        margin-inline-start: 6px;
+        padding-inline-end: 12px;
       }
 
       #leftContent {
         /* margin-start here must match margin-end on #rightContent. */
-        -webkit-margin-start: 12px;
+        margin-inline-start: 12px;
         position: relative;
         transition: opacity 100ms;
       }
 
       #leftSpacer {
-        -webkit-margin-start: 6px;
         align-items: center;
         display: flex;
+        margin-inline-start: 6px;
       }
 
       #menuButtonContainer {
@@ -55,7 +55,7 @@
       }
 
       #rightContent {
-        -webkit-margin-end: 12px;
+        margin-inline-end: 12px;
       }
 
       :host([narrow]) #centeredContent {
@@ -82,8 +82,6 @@
       }
 
       #menuPromo {
-        -webkit-padding-end: 12px;
-        -webkit-padding-start: 8px;
         align-items: center;
         background: #616161;
         border-radius: 2px;
@@ -93,6 +91,8 @@
         font-weight: 500;
         opacity: 0;
         padding-bottom: 6px;
+        padding-inline-end: 12px;
+        padding-inline-start: 8px;
         padding-top: 6px;
         position: absolute;
         top: var(--cr-toolbar-height);
@@ -120,12 +120,12 @@
 
       #closePromo {
         -webkit-appearance: none;
-        -webkit-margin-start: 12px;
         background: none;
         border: none;
         color: inherit;
         font-size: 20px;  /* Shouldn't change if default font-size changes. */
         line-height: 20px;
+        margin-inline-start: 12px;
         padding: 0;
         width: 20px;
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -60,9 +60,9 @@
       /* Input field. */
       #searchTerm {
         -webkit-font-smoothing: antialiased;
-        -webkit-margin-start: 2px;
         flex: 1;
         line-height: 185%;
+        margin-inline-start: 2px;
         position: relative;
       }
 
@@ -101,10 +101,10 @@
 
       /** Wide layout. */
       :host(:not([narrow])) {
-        -webkit-padding-end: 0;
         background: rgba(0, 0, 0, 0.22);
         border-radius: 2px;
         cursor: text;
+        padding-inline-end: 0;
         width: var(--cr-toolbar-field-width, 680px);
       }
 
@@ -128,7 +128,7 @@
 
       :host([narrow][showing-search]) #icon,
       :host([narrow][showing-search]) paper-spinner-lite {
-        -webkit-margin-start: 18px;  /* Line up with Menu icon. */
+        margin-inline-start: 18px;  /* Line up with Menu icon. */
       }
     </style>
     <template is="dom-if" id="spinnerTemplate">

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html

@@ -9,7 +9,6 @@
   <template>
     <style include="cr-icons paper-button-style">
       :host {
-        -webkit-padding-start: var(--cr-toolbar-field-margin, 0);
         background: white;
         border-bottom: 1px solid var(--google-grey-300);
         bottom: 0;
@@ -17,6 +16,7 @@
         display: flex;
         left: 0;
         opacity: 0;
+        padding-inline-start: var(--cr-toolbar-field-margin, 0);
         pointer-events: none;
         position: absolute;
         right: 0;
@@ -42,7 +42,7 @@
       }
 
       paper-button {
-        -webkit-margin-start: 8px;
+        margin-inline-start: 8px;
       }
 
       #number-selected {
@@ -50,9 +50,9 @@
       }
 
       paper-icon-button-light {
-        -webkit-margin-end: 24px;
-        -webkit-margin-start: 2px;
         height: 36px;
+        margin-inline-end: 24px;
+        margin-inline-start: 2px;
         width: 36px;
       }
 

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -91,7 +91,7 @@
 
       /* cancel-button is meant to be used within a cr-dialog */
       paper-button.cancel-button {
-        -webkit-margin-end: 8px;
+        margin-inline-end: 8px;
       }
 
       paper-button.action-button,

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -45,8 +45,8 @@
 
     --cr-paper-icon-button-margin: {
       /* Shift button so ripple overlaps the end of the row. */
-      -webkit-margin-end: var(--cr-icon-ripple-margin);
-      -webkit-margin-start: var(--cr-icon-button-margin-start);
+      margin-inline-end: var(--cr-icon-ripple-margin);
+      margin-inline-start: var(--cr-icon-button-margin-start);
     }
 
     --cr-primary-text: {

ui/webui/resources/css/apps/topbutton_bar.css

@@ -10,7 +10,6 @@
 .topbutton-bar button {
   -webkit-app-region: no-drag;
   -webkit-box-shadow: none;
-  -webkit-margin-end: 10px;
   background-color: transparent;
   background-image: none;
   background-position: center;
@@ -18,6 +17,7 @@
   border: 0;
   display: block;
   height: 32px;
+  margin-inline-end: 10px;
   min-width: 0;
   outline: none;
   padding: 0;

ui/webui/resources/css/bubble.css

@@ -22,7 +22,7 @@
 /* When the close button is there, we need more padding on the right of the
  * bubble. */
 .bubble-close:not([hidden]) ~ .bubble-content {
-  -webkit-padding-end: 22px;
+  padding-inline-end: 22px;
 }
 
 .bubble-close {

ui/webui/resources/css/bubble_button.css

@@ -3,10 +3,10 @@
  * found in the LICENSE file. */
 
 .bubble-button {
-  -webkit-margin-start: 4px;
   display: inline-block;
   height: 0;
   line-height: 1;
+  margin-inline-start: 4px;
   vertical-align: middle;
   width: 16px;
 }

ui/webui/resources/css/chrome_shared.css

@@ -81,8 +81,8 @@ html[dir='rtl'] div.weakrtl input {
 }
 
 html[dir='rtl'] .favicon-cell.weakrtl {
-  -webkit-padding-end: 22px;
-  -webkit-padding-start: 0;
+  padding-inline-end: 22px;
+  padding-inline-start: 0;
 }
 
 /* weakrtl for selection drop downs needs to account for the fact that

ui/webui/resources/css/controlled_indicator.css

@@ -9,7 +9,7 @@
 }
 
 .controlled-setting-indicator {
-  -webkit-margin-end: 0.3em;
+  margin-inline-end: 0.3em;
 }
 
 .controlled-setting-indicator:not([controlled-by]) {
@@ -63,12 +63,12 @@
 }
 
 .controlled-setting-bubble-extension-name {
-  -webkit-padding-start: 30px;
   background-repeat: no-repeat;
   font-weight: bold;
   height: 24px;
   margin-top: -9px;
   overflow: hidden;
+  padding-inline-start: 30px;
   padding-top: 3px;
   position: absolute;
   text-overflow: ellipsis;

ui/webui/resources/css/dialogs.css

@@ -95,11 +95,11 @@
 }
 
 .cr-dialog-title {
-  -webkit-margin-end: 20px;
   display: block;
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 10px;
+  margin-inline-end: 20px;
   white-space: nowrap;
   word-wrap: normal;
 }

ui/webui/resources/css/menu.css

@@ -72,7 +72,7 @@ cr-menu > [checked]::before {
 }
 
 cr-menu > [checked] {
-  -webkit-padding-start: 0;
+  padding-inline-start: 0;
 }
 
 cr-menu > [selected][checked]:active::before {
@@ -83,8 +83,8 @@ cr-menu > [selected][checked]:active::before {
  * but it's buggy in current webkit revision, so I have to use [showShortcuts].
  */
 cr-menu[showShortcuts] > ::after {
-  -webkit-padding-start: 30px;
   color: #999;
   content: attr(shortcutText);
   float: right;
+  padding-inline-start: 30px;
 }

ui/webui/resources/css/overlay.css

@@ -98,7 +98,6 @@ html[dir='rtl'] .overlay .page > .close-button {
 }
 
 .overlay .page h1 {
-  -webkit-padding-end: 24px;
   color: #333;
   /* 120% of the body's font-size of 84% is 16px. This will keep the relative
    * size between the body and these titles consistent. */
@@ -144,8 +143,8 @@ html[dir='rtl'] .overlay .page .action-area {
 .overlay .page .button-strip > :-webkit-any(button,
                                             input[type='button'],
                                             input[type='submit']) {
-  -webkit-margin-start: 10px;
   display: block;
+  margin-inline-start: 10px;
 }
 
 .overlay .page .button-strip > .default-button:not(:focus) {

ui/webui/resources/css/table.css

@@ -89,27 +89,27 @@ list > [selected]:hover {
 }
 
 .table-header-sort-image-desc::after {
-  -webkit-padding-start: 5px;
   color: #888;
   content: '\25be'; /* BLACK DOWN-POINTING SMALL TRIANGLE */
+  padding-inline-start: 5px;
   position: relative;
   top: -2px;
 }
 
 .table-header-sort-image-asc::after {
-  -webkit-padding-start: 5px;
   color: #888;
   content: '\25b4'; /* BLACK UP-POINTING SMALL TRIANGLE */
+  padding-inline-start: 5px;
   position: relative;
   top: -2px;
 }
 
 .table-header-splitter {
-  -webkit-margin-start: -1px;
   background-color: black;
   cursor: col-resize;
   height: 100%;
   left: 0;
+  margin-inline-start: -1px;
   position: absolute;
   top: 0;
   width: 5px;

ui/webui/resources/css/tabs.css

@@ -8,11 +8,11 @@ tabbox {
 }
 
 tabs {
-  -webkit-padding-start: 8px;
   background: -webkit-linear-gradient(white, rgb(243, 243, 243));
   border-bottom: 1px solid rgb(160, 160, 160);
   display: -webkit-box;
   margin: 0;
+  padding-inline-start: 8px;
 }
 
 /* New users of tabs.css should add 'new-style-tabs' to the class list of any
@@ -21,14 +21,13 @@ tabs {
  * TODO(rfevang): Remove when all users are converted to the new style.
  *                (crbug.com/247772). */
 tabs.new-style-tabs {
-  -webkit-padding-start: 9px;
   background: #fbfbfb;
   border-bottom: 1px solid #c8c8c8;
+  padding-inline-start: 9px;
   padding-top: 14px;
 }
 
 tabs > * {
-  -webkit-margin-start: 5px;
   background: rgba(160, 160, 160, .3);
   border: 1px solid rgba(160, 160, 160, .3);
   border-bottom: 0;
@@ -36,6 +35,7 @@ tabs > * {
   border-top-right-radius: 3px;
   cursor: default;
   display: block;
+  margin-inline-start: 5px;
   min-width: 4em;
   padding: 2px 10px;
   text-align: center;
@@ -43,11 +43,11 @@ tabs > * {
 }
 
 tabs.new-style-tabs > * {
-  -webkit-margin-start: 0;
   background: #fbfbfb;
   border: 1px solid #fbfbfb;
   border-bottom: 0;
   border-radius: 0;
+  margin-inline-start: 0;
   min-width: 0;
   padding: 4px 9px 4px 10px;
   transition: none;

ui/webui/resources/css/tree.css

@@ -96,9 +96,9 @@ tree:focus .tree-row[selected] {
 }
 
 .tree-label {
-  -webkit-padding-start: 20px;
   background-position: 0 50%;
   background-repeat: no-repeat;
+  padding-inline-start: 20px;
   white-space: pre;
 }
 
@@ -135,8 +135,8 @@ html[dir=rtl] .tree-item[expanded] > .tree-row > .tree-label {
 </if>
 
 tree[icon-visibility=hidden] .tree-label {
-  -webkit-padding-start: 0;
   background-image: none !important;
+  padding-inline-start: 0;
 }
 
 tree[icon-visibility=parent] .tree-label,

ui/webui/resources/css/widgets.css

@@ -49,19 +49,19 @@ select {
 :-webkit-any(button,
              input[type='button'],
              input[type='submit']):not(.custom-appearance) {
-  -webkit-padding-end: 10px;
-  -webkit-padding-start: 10px;
+  padding-inline-end: 10px;
+  padding-inline-start: 10px;
 }
 
 select {
   -webkit-appearance: none;
-  -webkit-padding-end: 24px;
-  -webkit-padding-start: 10px;
   /* OVERRIDE */
   background-image: url(../images/select.png),
       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-position: right center;
   background-repeat: no-repeat;
+  padding-inline-end: 24px;
+  padding-inline-start: 10px;
 }
 
 html[dir='rtl'] select {
@@ -269,9 +269,9 @@ input:disabled:-webkit-any([type='password'],
 }
 
 :-webkit-any(.checkbox, .radio) label input ~ span {
-  -webkit-margin-start: 0.6em;
   /* Make sure long spans wrap at the same horizontal position they start. */
   display: block;
+  margin-inline-start: 0.6em;
 }
 
 :-webkit-any(.checkbox, .radio) label:hover {

ui/webui/resources/html/md_select_css.html

@@ -14,10 +14,6 @@
         --md-arrow-width: 0.9em;
 
         -webkit-appearance: none;
-        /* Ensures 3px space between text and arrow */
-        -webkit-padding-end: calc(var(--md-select-side-padding) +
-            var(--md-arrow-width) + 3px);
-        -webkit-padding-start: var(--md-select-side-padding);
         background: url(chrome://resources/images/arrow_down.svg)
             calc(100% - var(--md-select-side-padding))
             center no-repeat;
@@ -33,6 +29,10 @@
         max-width: 100%;
         outline: none;
         padding-bottom: 6px;
+        /* Ensures 3px space between text and arrow */
+        padding-inline-end: calc(var(--md-select-side-padding) +
+            var(--md-arrow-width) + 3px);
+        padding-inline-start: var(--md-select-side-padding);
         padding-top: 6px;
         width: var(--md-select-width, 200px);
       }

ui/webui/resources/js/cr/ui/page_manager/page_manager.js

@@ -21,7 +21,7 @@ cr.define('cr.ui.pageManager', function() {
     /**
      * Offset of page container in pixels. Uber pages that use the side menu
      * can override this with the setter.
-     * The default (23) comes from -webkit-margin-start in uber_shared.css.
+     * The default (23) comes from margin-inline-start in uber_shared.css.
      * @type {number}
      */
     horizontalOffset_: 23,

ui/webui/resources/js/cr/ui/table/table_header.js

@@ -144,7 +144,7 @@ cr.define('cr.ui.table', function() {
         if (splitters[i].hidden)
           continue;
         place += cm.getWidth(i);
-        splitters[i].style.webkitMarginStart = place + 'px';
+        splitters[i].style.marginInlineStart = place + 'px';
       }
     },
 

ui/webui/resources/js/cr/ui/tree.js

@@ -311,7 +311,7 @@ cr.define('cr.ui', function() {
      */
     setDepth_: function(depth) {
       if (depth != this.depth_) {
-        this.rowElement.style.WebkitPaddingStart =
+        this.rowElement.style.paddingInlineStart =
             Math.max(0, depth - 1) * INDENT + 'px';
         this.depth_ = depth;
         var items = this.items;