--- a/browser/extensions/formautofill/FormAutofillParent.jsm
+++ b/browser/extensions/formautofill/FormAutofillParent.jsm
@@ -79,16 +79,17 @@ FormAutofillParent.prototype = {
    */
   async init() {
     Services.obs.addObserver(this, "advanced-pane-loaded");
     Services.ppmm.addMessageListener("FormAutofill:InitStorage", this);
     Services.ppmm.addMessageListener("FormAutofill:GetRecords", this);
     Services.ppmm.addMessageListener("FormAutofill:SaveAddress", this);
     Services.ppmm.addMessageListener("FormAutofill:SaveCreditCard", this);
     Services.ppmm.addMessageListener("FormAutofill:RemoveAddresses", this);
+    Services.ppmm.addMessageListener("FormAutofill:RemoveCreditCards", this);
     Services.ppmm.addMessageListener("FormAutofill:OpenPreferences", this);
     Services.mm.addMessageListener("FormAutofill:OnFormSubmit", this);
 
     // Observing the pref and storage changes
     Services.prefs.addObserver(ENABLED_PREF, this);
     Services.obs.addObserver(this, "formautofill-storage-changed");
   },
 
@@ -198,16 +199,20 @@ FormAutofillParent.prototype = {
         await this.profileStorage.creditCards.normalizeCCNumberFields(data.creditcard);
         this.profileStorage.creditCards.add(data.creditcard);
         break;
       }
       case "FormAutofill:RemoveAddresses": {
         data.guids.forEach(guid => this.profileStorage.addresses.remove(guid));
         break;
       }
+      case "FormAutofill:RemoveCreditCards": {
+        data.guids.forEach(guid => this.profileStorage.creditCards.remove(guid));
+        break;
+      }
       case "FormAutofill:OnFormSubmit": {
         this._onFormSubmit(data, target);
         break;
       }
       case "FormAutofill:OpenPreferences": {
         const win = RecentWindow.getMostRecentBrowserWindow();
         win.openPreferences("panePrivacy", {origin: "autofillFooter"});
       }
@@ -222,16 +227,17 @@ FormAutofillParent.prototype = {
   _uninit() {
     this.profileStorage._saveImmediately();
 
     Services.ppmm.removeMessageListener("FormAutofill:InitStorage", this);
     Services.ppmm.removeMessageListener("FormAutofill:GetRecords", this);
     Services.ppmm.removeMessageListener("FormAutofill:SaveAddress", this);
     Services.ppmm.removeMessageListener("FormAutofill:SaveCreditCard", this);
     Services.ppmm.removeMessageListener("FormAutofill:RemoveAddresses", this);
+    Services.ppmm.removeMessageListener("FormAutofill:RemoveCreditCards", this);
     Services.obs.removeObserver(this, "advanced-pane-loaded");
     Services.prefs.removeObserver(ENABLED_PREF, this);
   },
 
   /**
    * Get the records from profile store and return results back to content
    * process.
    *

--- a/browser/extensions/formautofill/test/browser/browser.ini
+++ b/browser/extensions/formautofill/test/browser/browser.ini
@@ -4,15 +4,16 @@ head = head.js
 support-files =
   ../fixtures/autocomplete_basic.html
   ../fixtures/autocomplete_creditcard_basic.html
 
 [browser_autocomplete_footer.js]
 [browser_autocomplete_marked_back_forward.js]
 [browser_autocomplete_marked_detached_tab.js]
 [browser_check_installed.js]
+[browser_dropdown_layout.js]
 [browser_editAddressDialog.js]
 [browser_first_time_use_doorhanger.js]
 [browser_insecure_form.js]
 [browser_manageAddressesDialog.js]
 [browser_privacyPreferences.js]
 [browser_submission_in_private_mode.js]
 [browser_update_doorhanger.js]

new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/test/browser/browser_dropdown_layout.js
@@ -0,0 +1,62 @@
+"use strict";
+
+const URL = "http://example.org/browser/browser/extensions/formautofill/test/browser/autocomplete_basic.html";
+const CC_URL = "https://example.org/browser/browser/extensions/formautofill/test/browser/autocomplete_creditcard_basic.html";
+
+add_task(async function setup_storage() {
+  await saveAddress(TEST_ADDRESS_1);
+  await saveAddress(TEST_ADDRESS_2);
+  await saveAddress(TEST_ADDRESS_3);
+
+  await saveCreditCard(TEST_CREDIT_CARD_1);
+  await saveCreditCard(TEST_CREDIT_CARD_2);
+  await saveCreditCard(TEST_CREDIT_CARD_3);
+});
+
+async function reopenPopupWithResizedInput(browser, selector, newSize) {
+  await closePopup(browser);
+  /* eslint no-shadow: ["error", { "allow": ["selector", "newSize"] }] */
+  await ContentTask.spawn(browser, {selector, newSize}, async function({selector, newSize}) {
+    const input = content.document.querySelector(selector);
+
+    input.style.boxSizing = "border-box";
+    input.style.width = newSize + "px";
+  });
+  await openPopupOn(browser, selector);
+}
+
+add_task(async function test_address_dropdown() {
+  await BrowserTestUtils.withNewTab({gBrowser, url: URL}, async function(browser) {
+    const focusInput = "#organization";
+    await openPopupOn(browser, focusInput);
+    const firstItem = getDisplayedPopupItems(browser)[0];
+
+    is(firstItem.getAttribute("ac-image"), "", "Should not show icon");
+
+    // The breakpoint of two-lines layout is 150px
+    await reopenPopupWithResizedInput(browser, focusInput, 140);
+    is(firstItem._itemBox.getAttribute("size"), "small", "Show two-lines layout");
+    await reopenPopupWithResizedInput(browser, focusInput, 160);
+    is(firstItem._itemBox.hasAttribute("size"), false, "Show one-line layout");
+
+    await closePopup(browser);
+  });
+});
+
+add_task(async function test_credit_card_dropdown() {
+  await BrowserTestUtils.withNewTab({gBrowser, url: CC_URL}, async function(browser) {
+    const focusInput = "#cc-number";
+    await openPopupOn(browser, focusInput);
+    const firstItem = getDisplayedPopupItems(browser)[0];
+
+    isnot(firstItem.getAttribute("ac-image"), "", "Should show icon");
+
+    // The breakpoint of two-lines layout is 185px
+    await reopenPopupWithResizedInput(browser, focusInput, 175);
+    is(firstItem._itemBox.getAttribute("size"), "small", "Show two-lines layout");
+    await reopenPopupWithResizedInput(browser, focusInput, 195);
+    is(firstItem._itemBox.hasAttribute("size"), false, "Show one-line layout");
+
+    await closePopup(browser);
+  });
+});

--- a/browser/extensions/formautofill/test/browser/head.js
+++ b/browser/extensions/formautofill/test/browser/head.js
@@ -150,33 +150,43 @@ function getRecords(data) {
     Services.cpmm.sendAsyncMessage("FormAutofill:GetRecords", data);
   });
 }
 
 function getAddresses() {
   return getRecords({collectionName: "addresses"});
 }
 
+function getCreditCards() {
+  return getRecords({collectionName: "creditCards"});
+}
+
 function saveAddress(address) {
   Services.cpmm.sendAsyncMessage("FormAutofill:SaveAddress", {address});
   return TestUtils.topicObserved("formautofill-storage-changed");
 }
 
 function saveCreditCard(creditcard) {
   let creditcardClone = Object.assign({}, creditcard);
   Services.cpmm.sendAsyncMessage("FormAutofill:SaveCreditCard", {
     creditcard: creditcardClone,
   });
   return TestUtils.topicObserved("formautofill-storage-changed");
 }
+
 function removeAddresses(guids) {
   Services.cpmm.sendAsyncMessage("FormAutofill:RemoveAddresses", {guids});
   return TestUtils.topicObserved("formautofill-storage-changed");
 }
 
+function removeCreditCards(guids) {
+  Services.cpmm.sendAsyncMessage("FormAutofill:RemoveCreditCards", {guids});
+  return TestUtils.topicObserved("formautofill-storage-changed");
+}
+
 /**
  * Clicks the popup notification button and wait for popup hidden.
  *
  * @param {number} buttonIndex Number indicating which button to click.
  *                             See the constants in this file.
  */
 async function clickDoorhangerButton(buttonIndex) {
   let popuphidden = BrowserTestUtils.waitForEvent(PopupNotifications.panel, "popuphidden");
@@ -205,9 +215,14 @@ function getDoorhangerCheckbox() {
   return notifications[0].checkbox;
 }
 
 registerCleanupFunction(async function() {
   let addresses = await getAddresses();
   if (addresses.length) {
     await removeAddresses(addresses.map(address => address.guid));
   }
+
+  let creditCards = await getCreditCards();
+  if (creditCards.length) {
+    await removeCreditCards(creditCards.map(cc => cc.guid));
+  }
 });