testing/web-platform/tests/css/css-backgrounds/background-size-019.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CSS Backgrounds and Borders Test: background-size - one &lt;percentage&gt; and one &lt;length&gt; values</title>
   6     <link rel="author" title="Intel" href="http://www.intel.com">
   7     <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-14 -->
   8     <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
   9     <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
  10     <meta name="flags" content="image">
  11     <meta name="assert" content="Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.">
  12     <style>
  13         #ref-overlapped-red {
  14             background-color: red;
  15             height: 100px;
  16             width: 100px;
  17         }
  18         #test-overlapping-green {
  19             background-image: url(support/1x1-green.png);
  20             background-repeat: no-repeat;
  21             background-size: 50% 100px;
  22             bottom: 100px;
  23             height: 100px;
  24             position: relative;
  25             width: 200px;
  26         }
  27     </style>
  28   </head>
  29   <body>
  30     <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  31     <div id="ref-overlapped-red"></div>
  32     <div id="test-overlapping-green"></div>
  33   </body>
  34 </html>