webkit-box-item-shrink-001.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /compat/webkit-box-item-shrink-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS -webkit-box Test: Testing no automatic minimum size for flex items in a legacy row-oriented flex container</title>

<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">

<link rel="author" title="Mozilla" href="https://www.mozilla.org/">

<link rel="help" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-box">

<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">

<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1929178">

<link rel="stylesheet" href="/fonts/ahem.css">

<meta name="assert" content="This test verifies that a flex item in a legacy -webkit-box can be shrunk as if it has no automatic minimum size.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<style>

.webkit-box {

  display: -webkit-box;

  width: 50px;

  height: 50px;

  border: 1px solid black;

  margin-bottom: 5px;

.webkit-box > * {

  /* Make the child block-level, to ensure that it's a flex item (otherwise it

   * may get wrapped in an anonymous box which becomes the flex item). */

  display: block;

  /* Allow the child to shrink. */

  -webkit-box-flex: 1;

  font: 20px/1 Ahem;

  background: lightblue;

  /* Get rid of UA default styles. */

  border: 0;

  padding: 0;

  margin: 0;

</style>

<body onload="checkLayout('.webkit-box')">

  <div class="webkit-box">

    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'></svg>"

         data-expected-width="50">

  </div>

  <div class="webkit-box">

    <img src="data:image/svg+xml,<svg width='300' height='100' xmlns='http://www.w3.org/2000/svg'></svg>"

         data-expected-width="50">

  </div>

  <div class="webkit-box">

    <svg width="300" height="100" data-expected-client-width="50"></svg>

  </div>

  <div class="webkit-box">

    <input type="text" data-expected-width="50">

  </div>

  <div class="webkit-box">

    <input type="range" data-expected-width="50">

  </div>

  <div class="webkit-box">

    <input type="button" value="XXXXXXX" data-expected-width="50">

  </div>

  <div class="webkit-box">

    <input type="submit" value="XXXXXXX" data-expected-width="50">

  </div>

  <div class="webkit-box">

    <input type="reset" value="XXXXXXX" data-expected-width="50">

  </div>

  <div class="webkit-box">

    <textarea data-expected-width="50">XXXXXXX</textarea>

  </div>

  <div class="webkit-box">

    <select data-expected-width="50">

      <option>XXXXXXX</option>

    </select>

  </div>

  <div class="webkit-box">

    <!-- This is a special case: <fieldset> is not compressible

         in blink, webkit, or gecko. -->

    <fieldset data-expected-width="140">XXXXXXX</fieldset>

  </div>

  <div class="webkit-box">

    <iframe data-expected-width="50"></iframe>

  </div>

  <div class="webkit-box">

    <button data-expected-width="50">XXXXXXX</button>

  </div>

  <div class="webkit-box">

    <canvas width="300" height="100" data-expected-width="50"></canvas>

  </div>

  <div class="webkit-box">

    <video controls data-expected-width="50"></video>

  </div>

  <div class="webkit-box">

    <audio controls data-expected-width="50"></audio>

  </div>

  <div class="webkit-box">

    <progress data-expected-width="50"></progress>

  </div>

  <div class="webkit-box">

    <meter data-expected-width="50"></meter>

  </div>

  <div class="webkit-box">

    <details data-expected-width="50">XXXXXXX</details>

  </div>

  <div class="webkit-box">

    <div style="width: 200px" data-expected-width="50">XXXXXXX</div>

  </div>

</body>