background-position-202

CSS background position: parsing

WeasyPrint

This browser

Flags
invalid

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html lang="en">
  3 <head>
  4   <title>CSS Test: CSS background position: parsing</title>
  5   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
  6   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/position/002.html" type="text/html">
  7   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
  8   <meta name="flags" content="invalid">
  9   <style type="text/css">
 10    .case { float: left; border: solid; margin: 0.2em; } /* 150 x 100 */
 11    .test { background: #FFFFCC url(support/ring.png) no-repeat; padding: 16px; }
 12    .control { width: 118px; height: 68px; background: url(support/diamond.png) no-repeat; }
 13 
 14    .a .control, .b .control, .c .control, .d .control, .e .control, .f .control { background-position: 100% 100%; }
 15    .case.a .test { background-position: right bottom; }
 16    .case.b .test { background-position: bottom right; }
 17    .case.c .test { background-position: 100% bottom; }
 18    .case.d .test { background-position: right 100%; }
 19    .case.e .test { background-position: 100% 58px; }
 20    .case.f .test { background-position: 108px 100%; }
 21 
 22    .g .control, .h .control, .i .control, .j .control, .k .control, .l .control, .m .control { background-position: 54px 28px; }
 23    .case.g .test { background-position: center center; }
 24    .case.h .test { background-position: 50% 50%; }
 25    .case.i .test { background-position: center 50%; }
 26    .case.j .test { background-position: 50% center; }
 27    .case.k .test { background-position: 50%; }
 28    .case.l .test { background-position: center; }
 29    .case.m .test { background-position: 54px; }
 30 
 31    .n .control, .o .control { background-position: 54px 56px; }
 32    .case.n .test { background-position: bottom center; }
 33    .case.o .test { background-position: center bottom; }
 34 
 35    .p .control, .q .control { background-position: 108px 28px; }
 36    .case.p .test { background-position: right center; }
 37    .case.q .test { background-position: center right; }
 38 
 39    .r .control { background-position: top right; }
 40    .case.r0 .test { background-position: right top; }
 41    .case.r1 .test { background-position: right 0; }
 42    .case.r2 .test { background-position: right 0px; }
 43    .case.r3 .test { background-position: right 0%; }
 44    .case.r4 .test { background-position: 100% top; }
 45    .case.r5 .test { background-position: 100% 0; }
 46    .case.r6 .test { background-position: 100% 0px; }
 47    .case.r7 .test { background-position: 100% 0%; }
 48    .case.r8 .test { background-position: 108px top; }
 49    .case.r9 .test { background-position: 108px 0; }
 50    .case.r10 .test { background-position: 108px 0px; }
 51    .case.r11 .test { background-position: 108px 0%; }
 52 
 53    .negative .control { background-position: 0% 0%; }
 54    .negative3 .control { background-position: 50% 50%; } /* CSS3 background supports comma */
 55    .case.t1 .test { background-position: right bottom bottom; }
 56    .case.t2 .test { background-position: bottom right bottom; }
 57    .case.t3 .test { background-position: bottom 100%; }
 58    .case.t4 .test { background-position: 100% right; }
 59    .case.t5 .test { background-position: bottom 8px; }
 60    .case.t6 .test { background-position: 23px right; }
 61    .case.t7 .test { background-position: center 50% center; }
 62    .case.t8 .test { background-position: 50% 50% 50%; }
 63    .case.t9 .test { background-position: center 50% 50%; }
 64    .case.t10 .test { background-position: 50%, 100%; } /* CSS3 background supports comma */
 65       /* This test makes sure the comma either is
 66            a) invalid per CSS2.1
 67            b) handled correctly per CSS3
 68          and NOT parsed as a valid separator of x and y offsets. */
 69    .case.t11 .test { background-position: bottom 54px; }
 70    .case.t12 .test { background-position: 50 50%; }
 71    .case.t13 .test { background-position: bottom 100; }
 72    .case.t14 .test { background-position: rightbottom; }
 73    .case.t15 .test { background-position: 0 right; }
 74    .case.t16 .test { background-position: 0px right; }
 75    .case.t17 .test { background-position: 0% right; }
 76    .case.t18 .test { background-position: top 100%; }
 77    .case.t19 .test { background-position: top 108px; }
 78    .case.t20 .test { background-position: top top; }
 79    .case.t21 .test { background-position: left right; }
 80    .case.t22 .test { background-position: left left; }
 81   </style>
 82  </head>
 83 <body>
 84   <p>In all the following boxes, the fuchsia diamond should be surrounded by a ring.</p>
 85   <div class="case a"><div class="test"><div class="control"></div></div></div>
 86   <div class="case b"><div class="test"><div class="control"></div></div></div>
 87   <div class="case c"><div class="test"><div class="control"></div></div></div>
 88   <div class="case d"><div class="test"><div class="control"></div></div></div>
 89   <div class="case e"><div class="test"><div class="control"></div></div></div>
 90   <div class="case f"><div class="test"><div class="control"></div></div></div>
 91   <div class="case g"><div class="test"><div class="control"></div></div></div>
 92   <div class="case h"><div class="test"><div class="control"></div></div></div>
 93   <div class="case i"><div class="test"><div class="control"></div></div></div>
 94   <div class="case j"><div class="test"><div class="control"></div></div></div>
 95   <div class="case k"><div class="test"><div class="control"></div></div></div>
 96   <div class="case l"><div class="test"><div class="control"></div></div></div>
 97   <div class="case m"><div class="test"><div class="control"></div></div></div>
 98   <div class="case n"><div class="test"><div class="control"></div></div></div>
 99   <div class="case o"><div class="test"><div class="control"></div></div></div>
100   <div class="case p"><div class="test"><div class="control"></div></div></div>
101   <div class="case q"><div class="test"><div class="control"></div></div></div>
102   <div class="case r r0"><div class="test"><div class="control"></div></div></div>
103   <div class="case r r1"><div class="test"><div class="control"></div></div></div>
104   <div class="case r r2"><div class="test"><div class="control"></div></div></div>
105   <div class="case r r3"><div class="test"><div class="control"></div></div></div>
106   <div class="case r r4"><div class="test"><div class="control"></div></div></div>
107   <div class="case r r5"><div class="test"><div class="control"></div></div></div>
108   <div class="case r r6"><div class="test"><div class="control"></div></div></div>
109   <div class="case r r7"><div class="test"><div class="control"></div></div></div>
110   <div class="case r r8"><div class="test"><div class="control"></div></div></div>
111   <div class="case r r9"><div class="test"><div class="control"></div></div></div>
112   <div class="case r r10"><div class="test"><div class="control"></div></div></div>
113   <div class="case negative t1"><div class="test"><div class="control"></div></div></div>
114   <div class="case negative t2"><div class="test"><div class="control"></div></div></div>
115   <div class="case negative t3"><div class="test"><div class="control"></div></div></div>
116   <div class="case negative t4"><div class="test"><div class="control"></div></div></div>
117   <div class="case negative t5"><div class="test"><div class="control"></div></div></div>
118   <div class="case negative t6"><div class="test"><div class="control"></div></div></div>
119   <div class="case negative t7"><div class="test"><div class="control"></div></div></div>
120   <div class="case negative t8"><div class="test"><div class="control"></div></div></div>
121   <div class="case negative t9"><div class="test"><div class="control"></div></div></div>
122   <div class="case negative negative3 t10"><div class="test"><div class="control"></div></div></div>
123   <div class="case negative t11"><div class="test"><div class="control"></div></div></div>
124   <div class="case negative t12"><div class="test"><div class="control"></div></div></div>
125   <div class="case negative t13"><div class="test"><div class="control"></div></div></div>
126   <div class="case negative t14"><div class="test"><div class="control"></div></div></div>
127   <div class="case negative t15"><div class="test"><div class="control"></div></div></div>
128   <div class="case negative t16"><div class="test"><div class="control"></div></div></div>
129   <div class="case negative t17"><div class="test"><div class="control"></div></div></div>
130   <div class="case negative t18"><div class="test"><div class="control"></div></div></div>
131   <div class="case negative t19"><div class="test"><div class="control"></div></div></div>
132   <div class="case negative t20"><div class="test"><div class="control"></div></div></div>
133   <div class="case negative t21"><div class="test"><div class="control"></div></div></div>
134   <div class="case negative t22"><div class="test"><div class="control"></div></div></div>
135  
136 
137 </body>
138 </html>