third_party/WebKit/LayoutTests/css3/calc/background-position-parsing.html

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