background-position-202.xht (8816B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 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>