third_party/WebKit/LayoutTests/fast/replaced/preferred-widths.html

   1 <style>
   2 .container {
   3     display: inline-block;
   4     border: 5px solid salmon;
   5 }
   6 .min-content {
   7     min-width: -webkit-min-content;
   8     min-width: -moz-min-content;
   9     min-width: -ie-min-content;
  10     min-width: min-content;
  11 }
  12 .max-content {
  13     min-width: -webkit-max-content;
  14     min-width: -moz-max-content;
  15     min-width: -ie-max-content;
  16     min-width: max-content;
  17 }
  18 </style>
  19 <p>Test the effect of percentages widths on the preferred widths of replaced elements.</p>
  20
  21 <div style="width: 0; position: relative">
  22
  23 <div class="container" data-expected-width=130 data-expected-height=130>
  24     <img class="min-content" src="resources/square-blue-100x100.png" style="width: 10px; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
  25 </div>
  26
  27 <div class="container" data-expected-width=130 data-expected-height=130>
  28     <img class="max-content" src="resources/square-blue-100x100.png" style="width: 10px; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
  29 </div>
  30
  31 <div class="container" data-expected-width=130 data-expected-height=130>
  32     <img class="min-content" src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
  33 </div>
  34
  35 <div class="container" data-expected-width=130 data-expected-height=130>
  36     <img class="max-content" src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=120 data-expected-height=120>
  37 </div>
  38
  39 <div class="container" data-expected-width=55 data-expected-height=75>
  40     <img src="resources/square-blue-100x100.png" style="min-width: 25px; width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=65 data-expected-height=65>
  41 </div>
  42
  43 <div class="container" data-expected-width=55 data-expected-height=75>
  44     <img src="resources/square-blue-100x100.png" style="min-width: 25px; width: 100%; border: 5px solid black; padding: 5px;" data-expected-width=65 data-expected-height=65>
  45 </div>
  46
  47 <div class="container" data-expected-width=30 data-expected-height=50>
  48     <img src="resources/square-blue-100x100.png" style="width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=40 data-expected-height=40>
  49 </div>
  50
  51 <div class="container" data-expected-width=30 data-expected-height=50>
  52     <img src="resources/square-blue-100x100.png" style="max-width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=40 data-expected-height=40>
  53 </div>
  54
  55 <div class="container" data-expected-width=130 data-expected-height=150>
  56     <img src="resources/square-blue-100x100.png" style="min-width: 100%; border: 5px solid grey; padding: 5px;" data-expected-width=140 data-expected-height=140>
  57 </div>
  58
  59 </div>
  60
  61 <script src="../../resources/check-layout.js"></script>
  62 <script>
  63 // Need to do this onload to make sure all the images have loaded.
  64 window.onload = function() { checkLayout(".container"); }
  65 </script>