third_party/WebKit/LayoutTests/css2.1/20110323/background-intrinsic-005.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <link rel="reference" href="background-intrinsic-ref.xht">
   5   <title>CSS Test: Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)</title>
   6   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   7   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
   8   <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
   9   <meta name="flags" content="may svg">
  10   <meta name="assert" content="A background image with only an intrinsic ratio     covers largest rectangle at that ratio that exceeds neither the height nor     width of the background positioning area.">
  11   <style type="text/css">
  12     /* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
  13     div {
  14       position: relative;
  15     }
  16     .cover, .limit {
  17       width: 120px;
  18       height: 120px;
  19       margin: 0.5em;
  20       background: green; /* Used to match reference; remove for debugging. */
  21     }
  22     .control {
  23       position: absolute;
  24       top: 10px; bottom: 10px;
  25       left: 10px; right: 30px;
  26     }
  27     .cover .control {
  28       background: red;
  29     }
  30     .limit .control {
  31       background: green;
  32     }
  33     .test {
  34       /* 80x100 bgpos area */
  35       height: 80px;
  36       width: 60px;
  37       padding: 10px;
  38       border: 10px solid transparent;
  39     }
  40
  41     /* Test */
  42     .cover .test {
  43       background: no-repeat url(resources/green-intrinsic-ratio-landscape.svg);
  44     }
  45     .limit .test {
  46       background: no-repeat url(resources/red-intrinsic-ratio-landscape.svg);
  47     }
  48     .cover .control {
  49       height: 53px;
  50     }
  51     .limit .control {
  52       height: 54px;
  53     }
  54   </style>
  55  </head>
  56  <body>
  57   <p>There must be two green boxes below and no red.</p>
  58
  59   <div class="cover">
  60     <div class="control"></div>
  61     <div class="test"></div>
  62   </div>
  63
  64   <div class="limit">
  65     <div class="test"></div>
  66     <div class="control"></div>
  67   </div>
  68
  69  </body>
  70 </html>