background-intrinsic-006

Background Intrinsic Sizes: Intrinsic Percentage Width and Height

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
svg
Assertion
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.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: Background Intrinsic Sizes: Intrinsic Percentage Width and Height</title>
 5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 6   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
 7   <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
 8   <link rel="match" href="reference/background-intrinsic-ref.htm">
 9   <meta name="flags" content="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(support/green-intrinsic-width-pc-height-pc.svg);
44     }
45     .limit .test {
46       background: no-repeat url(support/red-intrinsic-width-pc-height-pc.svg);
47     }
48     .control {
49       width: 32px;
50       height: 60px;
51     }
52   </style>
53  </head>
54  <body>
55   <p>There must be two green boxes below and no red.</p>
56 
57   <div class="cover">
58     <div class="control"></div>
59     <div class="test"></div>
60   </div>
61 
62   <div class="limit">
63     <div class="test"></div>
64     <div class="control"></div>
65   </div>
66 
67  </body>
68 </html>