| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| |
| |
| |
| <script type="text/javascript"> |
| 'use strict'; |
| function testGradient(css, queryProp) |
| { |
| var div = document.createElement('div'); |
| div.setAttribute('style', css); |
| document.body.appendChild(div); |
| |
| var result = getComputedStyle(div).getPropertyValue(queryProp); |
| document.body.removeChild(div); |
| return result; |
| } |
| |
| test(() => { |
| assert_equals(testGradient("background-image: linear-gradient(black 0%", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(top)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(10deg)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(top center, black 0%)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(10px 20%, black 0%)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(left left)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(left center)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(left 10deg, black 0%)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(black)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(right bottom, black, white)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: linear-gradient(black, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black 0, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0) 0px, rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black 0%, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black 0%, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black 10px, white 20px)", "background-image"), 'linear-gradient(rgb(0, 0, 0) 10px, rgb(255, 255, 255) 20px)'); |
| assert_equals(testGradient("background-image: linear-gradient(to bottom right, black 0%, white)", "background-image"), 'linear-gradient(to right bottom, rgb(0, 0, 0) 0%, rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(black 0%, white)", "background-image"), 'linear-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))'); |
| assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, white)", "background-image"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255))'); |
| }, 'linear-gradient'); |
| |
| test(() => { |
| assert_equals(testGradient("background-image: repeating-linear-gradient(black, white)", "background-image"), 'repeating-linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))'); |
| }, 'repeating-linear-gradient'); |
| |
| test(() => { |
| assert_equals(testGradient("background-image: radial-gradient(white, black)", "background-image"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(at bottom right, white, black)", "background-image"), 'radial-gradient(at right bottom, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(ellipse farthest-corner, white, black)", "background-image"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-corner, white, black)", "background-image"), 'radial-gradient(circle closest-corner, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle, white, black)", "background-image"), 'radial-gradient(circle, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-side, white, black)", "background-image"), 'radial-gradient(circle closest-side, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-side at top, white, black)", "background-image"), 'radial-gradient(circle closest-side at center top, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-side at top left, white, black)", "background-image"), 'radial-gradient(circle closest-side at left top, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-side at 10px 20%, white, black)", "background-image"), 'radial-gradient(circle closest-side at 10px 20%, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(10px, 20%, circle closest-side, white, black)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: radial-gradient(circle 10px 20%, circle closest-side, white, black)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: radial-gradient(circle 10px, circle closest-side, white, black)", "background-image"), 'none'); |
| assert_equals(testGradient("background-image: radial-gradient(10px, white, black)", "background-image"), 'radial-gradient(10px, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(10px 10px, white, black)", "background-image"), 'radial-gradient(10px 10px, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(ellipse closest-corner, white, black)", "background-image"), 'radial-gradient(closest-corner, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| assert_equals(testGradient("background-image: radial-gradient(circle closest-side, white, black)", "background-image"), 'radial-gradient(circle closest-side, rgb(255, 255, 255), rgb(0, 0, 0))'); |
| }, 'radial-gradient'); |
| |
| test(() => { |
| assert_equals(testGradient("background-image: repeating-radial-gradient(white, black)", "background-image"), 'repeating-radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))'); |
| }, 'repeating-radial-gradient'); |
| </script> |
| |
| </body> |
| </html> |