layout/reftests/forms/input/file/css-display.html

   1 <!doctype html>
   2 <meta charset="utf-8">
   3 <title>Test: File input with CSS display</title>
   4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
   5 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">
   6 <link rel="help" href="https://github.com/whatwg/html/issues/4082">
   7 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
   8 <link rel="match" href="css-overflow-ref.html">
   9 <style>
  10 input {
  11   height: 3em;
  12 }
  13 .inline       { display: inline }
  14 .inline-grid  { display: inline-grid; grid: 500px/500px; align-items: end; }
  15 .inline-flex  { display: inline-flex; flex-flow: column; align-items: end; }
  16 .inline-block { display: inline-block }
  17 .inline-table { display: inline-table }
  18 .inline-columns { display: inline-block; column-width: 500px; column-rule: 10px solid; }
  19 .grid  { display: grid; grid: 500px/500px; align-items: end; }
  20 .flex  { display: flex; flex-flow: column; align-items: end; }
  21 .block { display: block }
  22 .table { display: table }
  23 .columns { display: block; column-width: 500px; column-rule: 10px solid; }
  24 .n { -webkit-appearance:none; appearance:none; }
  25 </style>
  26 <body>
  27   <input type="file" class="grid">
  28   <input type="file" class="flex">
  29   <input type="file" class="block">
  30   <input type="file" class="table">
  31   <input type="file" class="columns">
  32
  33   A<input type="file">
  34   <input type="file" class="inline">
  35   <input type="file" class="inline-grid">
  36   <input type="file" class="inline-flex">
  37   <input type="file" class="inline-block">
  38   <input type="file" class="inline-table">
  39   <input type="file" class="inline-columns">
  40
  41   A<input disabled type="file">
  42   <input disabled type="file" class="inline">
  43   <input disabled type="file" class="inline-grid">
  44   <input disabled type="file" class="inline-flex">
  45   <input disabled type="file" class="inline-block">
  46   <input disabled type="file" class="inline-table">
  47   <input disabled type="file" class="inline-columns">
  48
  49   A<input type="file" class="n">
  50   <input type="file" class="n inline">
  51   <input type="file" class="n inline-grid">
  52   <input type="file" class="n inline-flex">
  53   <input type="file" class="n inline-block">
  54   <input type="file" class="n inline-table">
  55   <input type="file" class="n inline-columns">
  56
  57   A<input disabled type="file" class="n">
  58   <input disabled type="file" class="n inline">
  59   <input disabled type="file" class="n inline-grid">
  60   <input disabled type="file" class="n inline-flex">
  61   <input disabled type="file" class="n inline-block">
  62   <input disabled type="file" class="n inline-table">
  63   <input disabled type="file" class="n inline-columns">
  64 </body>