src/third_party/WebKit/LayoutTests/fast/backgrounds/repeat/negative-offset-repeat-transformed.html

   1 <!DOCTYPE HTML>
   2 <html>
   3     <style type="text/css">
   4     body { overflow:hidden; }
   5
   6     .s300
   7     {
   8         width: 30px;
   9         height: 30px;
  10     }
  11
  12     .s250
  13     {
  14         width: 25px;
  15         height: 25px;
  16     }
  17
  18     .s200
  19     {
  20         width: 20px;
  21         height: 20px;
  22     }
  23
  24     div
  25     {
  26         margin: 6px;
  27         border: 1px dotted green;
  28         background-image: url(resources/gradient.gif);
  29     }
  30
  31     div
  32     {
  33         padding: 1px;
  34         float: left;
  35     }
  36
  37     p
  38     {
  39         clear: both;
  40     }
  41
  42     .negative
  43     {
  44         background-position: -13px -13px;
  45     }
  46
  47     .positive
  48     {
  49         background-position: 13px 13px;
  50     }
  51     </style>
  52 </head>
  53 <body>
  54     <p>
  55         Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=5399">http://bugs.webkit.org/show_bug.cgi?id=5399</a>
  56         no-repeat on negatively positioned background images are ignored</i>.
  57     </p>
  58     <p>Element with background image starting at (-13, -13) with no-repeat set:</p>
  59     <div class="negative s300" style="background-repeat: no-repeat;"></div>
  60     <div class="negative s250" style="background-repeat: no-repeat;"></div>
  61     <div class="negative s200" style="background-repeat: no-repeat;"></div>
  62
  63     <p>Element with background image starting at (-13, -13) with repeat-y set:</p>
  64     <div class="negative s300" style="background-repeat: repeat-y"></div>
  65     <div class="negative s250" style="background-repeat: repeat-y"></div>
  66     <div class="negative s200" style="background-repeat: repeat-y"></div>
  67
  68     <p>Element with background image starting at (-13, -13) with repeat-x set:</p>
  69     <div class="negative s300" style="background-repeat: repeat-x"></div>
  70     <div class="negative s250" style="background-repeat: repeat-x"></div>
  71     <div class="negative s200" style="background-repeat: repeat-x"></div>
  72
  73     <p>Element with background image starting at (13, 13) with no-repeat set:</p>
  74     <div class="positive s300" style="background-repeat: no-repeat;"></div>
  75     <div class="positive s250" style="background-repeat: no-repeat;"></div>
  76     <div class="positive s200" style="background-repeat: no-repeat;"></div>
  77
  78     <p>Element with background image starting at (13, 13) with repeat-y set:</p>
  79     <div class="positive s300" style="background-repeat: repeat-y"></div>
  80     <div class="positive s250" style="background-repeat: repeat-y"></div>
  81     <div class="positive s200" style="background-repeat: repeat-y"></div>
  82
  83     <p>Element with background image starting at (13, 13) with repeat-x set:</p>
  84     <div class="positive s300" style="background-repeat: repeat-x"></div>
  85     <div class="positive s250" style="background-repeat: repeat-x"></div>
  86     <div class="positive s200" style="background-repeat: repeat-x"></div>
  87
  88     <p style="position:absolute;height:5000px"></p>
  89     <table style="clear:both; transform: translate(650px, -150px) rotate(45deg); -webkit-transform-origin: 100% 0" border=5><tr><td>
  90     <div class="negative s300" style="background-repeat: no-repeat;"></div>
  91     <div class="negative s250" style="background-repeat: no-repeat;"></div>
  92     <div class="negative s200" style="background-repeat: no-repeat;"></div>
  93
  94     <p>Element with background image starting at (-13, -13) with repeat-y set:</p>
  95     <div class="negative s300" style="background-repeat: repeat-y"></div>
  96     <div class="negative s250" style="background-repeat: repeat-y"></div>
  97     <div class="negative s200" style="background-repeat: repeat-y"></div>
  98
  99     <p>Element with background image starting at (-13, -13) with repeat-x set:</p>
 100     <div class="negative s300" style="background-repeat: repeat-x"></div>
 101     <div class="negative s250" style="background-repeat: repeat-x"></div>
 102     <div class="negative s200" style="background-repeat: repeat-x"></div>
 103
 104     <p>Element with background image starting at (13, 13) with no-repeat set:</p>
 105     <div class="positive s300" style="background-repeat: no-repeat;"></div>
 106     <div class="positive s250" style="background-repeat: no-repeat;"></div>
 107     <div class="positive s200" style="background-repeat: no-repeat;"></div>
 108
 109     <p>Element with background image starting at (13, 13) with repeat-y set:</p>
 110     <div class="positive s300" style="background-repeat: repeat-y"></div>
 111     <div class="positive s250" style="background-repeat: repeat-y"></div>
 112     <div class="positive s200" style="background-repeat: repeat-y"></div>
 113
 114     <p>Element with background image starting at (13, 13) with repeat-x set:</p>
 115     <div class="positive s300" style="background-repeat: repeat-x"></div>
 116     <div class="positive s250" style="background-repeat: repeat-x"></div>
 117     <div class="positive s200" style="background-repeat: repeat-x"></div>
 118 </table>
 119 </body>
 120 </html>