third_party/WebKit/LayoutTests/fast/gradients/unprefixed-gradient-parsing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <script>
   8
   9 function testGradient(css)
  10 {
  11     var div = document.createElement('div');
  12     div.setAttribute('style', css);
  13     document.body.appendChild(div);
  14
  15     var result = getComputedStyle(div).backgroundImage;
  16     document.body.removeChild(div);
  17     return result;
  18 }
  19
  20 debug('<p>linear-gradient</p>');
  21
  22 shouldBe('testGradient("background-image: linear-gradient(black 0%)")', '"none"');
  23 shouldBe('testGradient("background-image: linear-gradient(top)")', '"none"');
  24 shouldBe('testGradient("background-image: linear-gradient(to top)")', '"none"');
  25 shouldBe('testGradient("background-image: linear-gradient(10deg)")', '"none"');
  26 shouldBe('testGradient("background-image: linear-gradient(10deg black, white)")', '"none"');
  27 shouldBe('testGradient("background-image: linear-gradient(to black, white)")', '"none"');
  28 shouldBe('testGradient("background-image: linear-gradient(to left black, white)")', '"none"');
  29 shouldBe('testGradient("background-image: linear-gradient(to top center, black 0%, white)")', '"none"');
  30 shouldBe('testGradient("background-image: linear-gradient(10px 20%, black 0%)")', '"none"');
  31 shouldBe('testGradient("background-image: linear-gradient(to left left)")', '"none"');
  32 shouldBe('testGradient("background-image: linear-gradient(to left center)")', '"none"');
  33 shouldBe('testGradient("background-image: linear-gradient(to left 10deg, black 0%, white)")', '"none"');
  34 shouldBe('testGradient("background-image: linear-gradient(black)")', '"none"');
  35
  36 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 25%, 50%, white)")', '"none"');
  37 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 50%)")', '"none"');
  38 shouldBe('testGradient("background-image: linear-gradient(10deg, 50%, white)")', '"none"');
  39 shouldBe('testGradient("background-image: linear-gradient(10deg, 0%, black, white)")', '"none"');
  40 shouldBe('testGradient("background-image: linear-gradient(10deg, white, black, 80%)")', '"none"');
  41 shouldBe('testGradient("background-image: linear-gradient(10deg, black, , white)")', '"none"');
  42
  43 shouldBe('testGradient("background-image: linear-gradient(black, white)")', '"linear-gradient(black, white)"');
  44 shouldBe('testGradient("background-image: linear-gradient(black 0, white)")', '"linear-gradient(black 0px, white)"');
  45 shouldBe('testGradient("background-image: linear-gradient(black 0%, white)")', '"linear-gradient(black 0%, white)"');
  46 shouldBe('testGradient("background-image: linear-gradient(black 0%, white)")', '"linear-gradient(black 0%, white)"');
  47 shouldBe('testGradient("background-image: linear-gradient(black 10px, white 20px)")', '"linear-gradient(black 10px, white 20px)"');
  48 shouldBe('testGradient("background-image: linear-gradient(to top left, black 0%, white)")', '"linear-gradient(to left top, black 0%, white)"');
  49 shouldBe('testGradient("background-image: linear-gradient(to top, black 0%, white)")', '"linear-gradient(to top, black 0%, white)"');
  50 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, white)")', '"linear-gradient(10deg, black 0%, white)"');
  51 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 25%, white)")', '"linear-gradient(10deg, black 0%, 25%, white)"');
  52 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 0%, white)")', '"linear-gradient(10deg, black 0%, 0%, white)"');
  53 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 100%, white)")', '"linear-gradient(10deg, black 0%, 100%, white)"');
  54 shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 50%, green 50%, 50%, white)")', '"linear-gradient(10deg, black 0%, 50%, green 50%, 50%, white)"');
  55
  56 debug('<p>repeating-linear-gradient</p>');
  57 shouldBe('testGradient("background-image: repeating-linear-gradient(black, white)")', '"repeating-linear-gradient(black, white)"');
  58 shouldBe('testGradient("background-image: repeating-linear-gradient(black, 35%, white)")', '"repeating-linear-gradient(black, 35%, white)"');
  59
  60 debug('<p>radial-gradient</p>');
  61
  62 shouldBe('testGradient("background-image: radial-gradient(white, black)")', '"radial-gradient(white, black)"');
  63 shouldBe('testGradient("background-image: radial-gradient(at bottom right, white, black)")', '"radial-gradient(at 100% 100%, white, black)"');
  64 shouldBe('testGradient("background-image: radial-gradient(farthest-corner, white, black)")', '"radial-gradient(white, black)"');
  65 shouldBe('testGradient("background-image: radial-gradient(farthest-corner, white, 35%, black)")', '"radial-gradient(white, 35%, black)"');
  66 shouldBe('testGradient("background-image: radial-gradient(closest-side, white, black)")', '"radial-gradient(closest-side, white, black)"');
  67 shouldBe('testGradient("background-image: radial-gradient(ellipse, white, black)")', '"radial-gradient(white, black)"');
  68 shouldBe('testGradient("background-image: radial-gradient(ellipse farthest-corner, white, black)")', '"radial-gradient(white, black)"');
  69 shouldBe('testGradient("background-image: radial-gradient(ellipse closest-side, white, black)")', '"radial-gradient(closest-side, white, black)"');
  70 shouldBe('testGradient("background-image: radial-gradient(circle, white, black)")', '"radial-gradient(circle, white, black)"');
  71 shouldBe('testGradient("background-image: radial-gradient(circle farthest-corner, white, black)")', '"radial-gradient(circle, white, black)"');
  72 shouldBe('testGradient("background-image: radial-gradient(circle closest-side, white, black)")', '"radial-gradient(circle closest-side, white, black)"');
  73 shouldBe('testGradient("background-image: radial-gradient(circle closest-side at top, white, black)")', '"radial-gradient(circle closest-side at 50% 0%, white, black)"');
  74 shouldBe('testGradient("background-image: radial-gradient(circle closest-side at top left, white, black)")', '"radial-gradient(circle closest-side at 0% 0%, white, black)"');
  75 shouldBe('testGradient("background-image: radial-gradient(circle closest-side at 10px 20%, white, black)")', '"radial-gradient(circle closest-side at 10px 20%, white, black)"');
  76 shouldBe('testGradient("background-image: radial-gradient(at 10px 20% circle closest-side, white, black)")', '"none"');
  77 shouldBe('testGradient("background-image: radial-gradient(circle at 10px 20% circle, white, black)")', '"none"');
  78 shouldBe('testGradient("background-image: radial-gradient(circle 10px closest-side, white, black)")', '"none"');
  79 shouldBe('testGradient("background-image: radial-gradient(circle 10%, white, black)")', '"none"');
  80 shouldBe('testGradient("background-image: radial-gradient(circle 10px 10px, white, black)")', '"none"');
  81 shouldBe('testGradient("background-image: radial-gradient(ellipse 10%, white, black)")', '"none"');
  82 shouldBe('testGradient("background-image: radial-gradient(ellipse 10px, white, black)")', '"none"');
  83 shouldBe('testGradient("background-image: radial-gradient(25%, black)")', '"none"');
  84 shouldBe('testGradient("background-image: radial-gradient(white, 25%)")', '"none"');
  85 shouldBe('testGradient("background-image: radial-gradient(white, black, 25%)")', '"none"');
  86 shouldBe('testGradient("background-image: radial-gradient(25%, white, black)")', '"none"');
  87 shouldBe('testGradient("background-image: radial-gradient(white,, black)")', '"none"');
  88 shouldBe('testGradient("background-image: radial-gradient(ellipse 10px, white, 25%, 75%, black)")', '"none"');
  89 shouldBe('testGradient("background-image: radial-gradient(ellipse 10px 20px, white, black)")', '"radial-gradient(10px 20px, white, black)"');
  90 shouldBe('testGradient("background-image: radial-gradient(circle 10px, white, black)")', '"radial-gradient(10px, white, black)"');
  91 shouldBe('testGradient("background-image: radial-gradient(10px 10px at center, white, black)")', '"radial-gradient(10px 10px at 50% 50%, white, black)"');
  92 shouldBe('testGradient("background-image: radial-gradient(10px 10px at center, white, 50%, black)")', '"radial-gradient(10px 10px at 50% 50%, white, 50%, black)"');
  93 shouldBe('testGradient("background-image: radial-gradient(10px 10px at center, white, 0%, black)")', '"radial-gradient(10px 10px at 50% 50%, white, 0%, black)"');
  94 shouldBe('testGradient("background-image: radial-gradient(10px 10px at center, white, 100%, black)")', '"radial-gradient(10px 10px at 50% 50%, white, 100%, black)"');
  95
  96 debug('<p>repeating-radial-gradient</p>');
  97 shouldBe('testGradient("background-image: repeating-radial-gradient(white, black)")', '"repeating-radial-gradient(white, black)"');
  98 shouldBe('testGradient("background-image: repeating-radial-gradient(white, 81%, black)")', '"repeating-radial-gradient(white, 81%, black)"');
  99
 100 </script>
 101
 102 </body>
 103 </html>