View All Attachments for Bug 150024

Attachment #262879
[Image] Actual/Expected	image/png	2015-10-12 00:17:05 PDT	18.84 KB	no flags	Details

Attachment #262880
[HTML] Reduction	text/html	2015-10-12 00:18:04 PDT	1.36 KB	no flags	Details

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Inputs and flexbox aren't friends</title>
    <style>
    .filter-bar {
        display: flex;
        outline: 1px solid #8ab14b;
        background: rgba(218, 255, 82, 0.48);
    }
    .navigation-bar {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    .navigation-bar .item {
        display: flex;
        align-items: center;
        width: 26px;
        border: 1px solid rgba(204, 110, 207, 0.66);
        margin: 1px;
        background: #fdeaff;
    }
    .filter-bar > .search {
        display: flex;
        flex: 1;
        margin: 3px 6px 4px;
        padding-top: 0;
        outline: none;
        -webkit-appearance: none;
        border: 1px solid hsla(0, 0%, 0%, 0.25);
        background-color: hsla(0, 0%, 100%, 0.2);
        background-clip: padding-box;
        height: 22px;
    }
    </style>
</head>
<body>

<h2>input</h2>
<div class="filter-bar" style="width: 130px">
    <div class="navigation-bar">
        <div class="item">A</div>
    </div>
    <input class="search" type="search" spellcheck="false" placeholder="Filter Breakpoint List">
</div>

<h2>div</h2>
<div class="filter-bar" style="width: 130px">
    <div class="navigation-bar">
        <div class="item">A</div>
    </div>
    <div class="search">Filter Breakpoint List</div>
</div>
</body>
</html>

Attachment #279374
Reduced test case	text/html	2016-05-19 02:16:25 PDT	396 bytes	no flags	Details

<!DOCTYPE html>

<style>
 .filter-bar {
     display: flex;
     outline: 1px solid #8ab14b;
     background: rgba(218, 255, 82, 0.48);
 }
 .filter-bar > .search {
     display: flex;
     flex: 1;
     margin: 3px 6px 4px;
     border: 1px solid hsla(0, 0%, 0%, 0.25);
     height: 22px;
 }
</style>

<div class="filter-bar" style="width: 130px">
    <input class="search" type="search">
</div>

Attachment #279375
Web Engines Rendering	image/png	2016-05-19 02:25:27 PDT	5.31 KB	no flags	Details