LayoutTests/fast/gradients/css3-gradient-parsing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../js/resources/js-test-pre.js"></script>
   5 </head>
   6 <body>
   7
   8
   9
  10 <script type="text/javascript">
  11
  12 function testGradient(css, queryProp)
  13 {
  14     var div = document.createElement('div');
  15     div.setAttribute('style', css);
  16     document.body.appendChild(div);
  17
  18     var result = getComputedStyle(div).getPropertyValue(queryProp);
  19     document.body.removeChild(div);
  20     return result;
  21 }
  22
  23 function testSame(dir, prop, altProp, value)
  24 {
  25     shouldBeEqualToString('test("' + dir + '", "' + prop + ': ' + value + '", "' + altProp + '")', value);
  26     shouldBeEqualToString('test("' + dir + '", "' + altProp + ': ' + value + '", "' + prop + '")', value);
  27 }
  28
  29 debug('<p>-webkit-linear-gradient</p>');
  30
  31 shouldBe('testGradient("background-image: -webkit-linear-gradient(black 0%", "background-image")', '"none"');
  32 shouldBe('testGradient("background-image: -webkit-linear-gradient(top)", "background-image")', '"none"');
  33 shouldBe('testGradient("background-image: -webkit-linear-gradient(10deg)", "background-image")', '"none"');
  34 shouldBe('testGradient("background-image: -webkit-linear-gradient(top center, black 0%)", "background-image")', '"none"');
  35 shouldBe('testGradient("background-image: -webkit-linear-gradient(10px 20%, black 0%)", "background-image")', '"none"');
  36 shouldBe('testGradient("background-image: -webkit-linear-gradient(left left)", "background-image")', '"none"');
  37 shouldBe('testGradient("background-image: -webkit-linear-gradient(left center)", "background-image")', '"none"');
  38 shouldBe('testGradient("background-image: -webkit-linear-gradient(left 10deg, black 0%)", "background-image")', '"none"');
  39 shouldBe('testGradient("background-image: -webkit-linear-gradient(black)", "background-image")', '"none"');
  40 shouldBe('testGradient("background-image: -webkit-linear-gradient(black, white)", "background-image")', '"-webkit-linear-gradient(top, black, white)"');
  41 shouldBe('testGradient("background-image: -webkit-linear-gradient(black 0, white)", "background-image")', '"-webkit-linear-gradient(top, black 0px, white)"');
  42 shouldBe('testGradient("background-image: -webkit-linear-gradient(black 0%, white)", "background-image")', '"-webkit-linear-gradient(top, black 0%, white)"');
  43 shouldBe('testGradient("background-image: -webkit-linear-gradient(black 0%, white)", "background-image")', '"-webkit-linear-gradient(top, black 0%, white)"');
  44 shouldBe('testGradient("background-image: -webkit-linear-gradient(black, white)", "background-image")', '"-webkit-linear-gradient(top, black, white)"');
  45 shouldBe('testGradient("background-image: -webkit-linear-gradient(black 10px, white 20px)", "background-image")', '"-webkit-linear-gradient(top, black 10px, white 20px)"');
  46 shouldBe('testGradient("background-image: -webkit-linear-gradient(top left, black 0%, white)", "background-image")', '"-webkit-linear-gradient(left top, black 0%, white)"');
  47 shouldBe('testGradient("background-image: -webkit-linear-gradient(top, black 0%, white)", "background-image")', '"-webkit-linear-gradient(top, black 0%, white)"');
  48 shouldBe('testGradient("background-image: -webkit-linear-gradient(10deg, black 0%, white)", "background-image")', '"-webkit-linear-gradient(10deg, black 0%, white)"');
  49
  50 debug('<p>-webkit-repeating-linear-gradient</p>');
  51 shouldBe('testGradient("background-image: -webkit-repeating-linear-gradient(black, white)", "background-image")', '"-webkit-repeating-linear-gradient(top, black, white)"');
  52
  53 debug('<p>-webkit-radial-gradient</p>');
  54
  55 shouldBe('testGradient("background-image: -webkit-radial-gradient(white, black)", "background-image")', '"-webkit-radial-gradient(center, white, black)"');
  56 shouldBe('testGradient("background-image: -webkit-radial-gradient(bottom right, white, black)", "background-image")', '"-webkit-radial-gradient(100% 100%, white, black)"');
  57 shouldBe('testGradient("background-image: -webkit-radial-gradient(cover, white, black)", "background-image")', '"-webkit-radial-gradient(center, ellipse cover, white, black)"');
  58 shouldBe('testGradient("background-image: -webkit-radial-gradient(circle, white, black)", "background-image")', '"-webkit-radial-gradient(center, circle cover, white, black)"');
  59 shouldBe('testGradient("background-image: -webkit-radial-gradient(circle contain, white, black)", "background-image")', '"-webkit-radial-gradient(center, circle contain, white, black)"');
  60 shouldBe('testGradient("background-image: -webkit-radial-gradient(top, circle contain, white, black)", "background-image")', '"-webkit-radial-gradient(50% 0%, circle contain, white, black)"');
  61 shouldBe('testGradient("background-image: -webkit-radial-gradient(top left, circle contain, white, black)", "background-image")', '"-webkit-radial-gradient(0% 0%, circle contain, white, black)"');
  62 shouldBe('testGradient("background-image: -webkit-radial-gradient(10px 20%, circle contain, white, black)", "background-image")', '"-webkit-radial-gradient(10px 20%, circle contain, white, black)"');
  63 shouldBe('testGradient("background-image: -webkit-radial-gradient(10px, 20%, circle contain, white, black)", "background-image")', '"none"');
  64 shouldBe('testGradient("background-image: -webkit-radial-gradient(circle 10px 20%, circle contain, white, black)", "background-image")', '"none"');
  65 shouldBe('testGradient("background-image: -webkit-radial-gradient(circle 10px, circle contain, white, black)", "background-image")', '"none"');
  66 shouldBe('testGradient("background-image: -webkit-radial-gradient(center, 10px, white, black)", "background-image")', '"none"');
  67 shouldBe('testGradient("background-image: -webkit-radial-gradient(center, 10px 10px, white, black)", "background-image")', '"-webkit-radial-gradient(50% 50%, 10px 10px, white, black)"');
  68 shouldBe('testGradient("background-image: -webkit-radial-gradient(ellipse farthest-corner, white, black)", "background-image")', '"-webkit-radial-gradient(center, ellipse farthest-corner, white, black)"');
  69 shouldBe('testGradient("background-image: -webkit-radial-gradient(circle closest-side, white, black)", "background-image")', '"-webkit-radial-gradient(center, circle closest-side, white, black)"');
  70
  71 debug('<p>-webkit-repeating-radial-gradient</p>');
  72 shouldBe('testGradient("background-image: -webkit-repeating-radial-gradient(white, black)", "background-image")', '"-webkit-repeating-radial-gradient(center, white, black)"');
  73
  74 </script>
  75
  76 <script src="../js/resources/js-test-post.js"></script>
  77 </body>
  78 </html>