| <html> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test the parsing of lab(...) and lch(...) colors."); |
| |
| function computedStyle(property, value) |
| { |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| div.style.setProperty(property, value); |
| var computedValue = getComputedStyle(div).getPropertyValue(property); |
| document.body.removeChild(div); |
| return computedValue; |
| } |
| |
| function innerStyle(property, value) |
| { |
| var div = document.createElement("div"); |
| div.style.setProperty(property, value); |
| return div.style.getPropertyValue(property); |
| } |
| |
| function testComputed(property, value, expected) |
| { |
| shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function testInner(property, value, expected) |
| { |
| if (expected === null) |
| expected = ""; |
| shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| debug('lab()'); |
| testComputed("background-color", "lab(0% 0 0)", "lab(0% 0 0)"); |
| testComputed("background-color", "lab(0% 0 0 / 1)", "lab(0% 0 0)"); |
| testComputed("background-color", "lab(0% 0 0 / 0.5)", "lab(0% 0 0 / 0.5)"); |
| testComputed("background-color", "lab(20% 0 10/0.5)", "lab(20% 0 10 / 0.5)"); |
| testComputed("background-color", "lab(20% 0 10/50%)", "lab(20% 0 10 / 0.5)"); |
| testComputed("background-color", "lab(400% 0 10/50%)", "lab(400% 0 10 / 0.5)"); |
| testComputed("background-color", "lab(50% -160 160)", "lab(50% -160 160)"); |
| testComputed("background-color", "lab(50% -200 200)", "lab(50% -200 200)"); |
| testComputed("background-color", "lab(0% 0 0 / -10%)", "lab(0% 0 0 / 0)"); |
| testComputed("background-color", "lab(0% 0 0 / 110%)", "lab(0% 0 0)"); |
| testComputed("background-color", "lab(0% 0 0 / 300%)", "lab(0% 0 0)"); |
| testComputed("background-color", "lab(-40% 0 0)", "lab(0% 0 0)"); |
| testComputed("background-color", "lab(50% -20 0)", "lab(50% -20 0)"); |
| testComputed("background-color", "lab(50% 0 -20)", "lab(50% 0 -20)"); |
| |
| debug(''); |
| debug('lch()'); |
| testComputed("background-color", "lch(0% 0 0deg)", "lch(0% 0 0)"); |
| testComputed("background-color", "lch(0% 0 0deg / 1)", "lch(0% 0 0)"); |
| testComputed("background-color", "lch(0% 0 0deg / 0.5)", "lch(0% 0 0 / 0.5)"); |
| testComputed("background-color", "lch(100% 230 0deg / 0.5)", "lch(100% 230 0 / 0.5)"); |
| testComputed("background-color", "lch(20% 50 20deg/0.5)", "lch(20% 50 20 / 0.5)"); |
| testComputed("background-color", "lch(20% 50 20deg/50%)", "lch(20% 50 20 / 0.5)"); |
| testComputed("background-color", "lch(10% 20 20deg / -10%)", "lch(10% 20 20 / 0)"); |
| testComputed("background-color", "lch(10% 20 20deg / 110%)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(10% 20 1.28rad)", "lch(10% 20 73.3386)"); |
| testComputed("background-color", "lch(10% 20 380deg)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(10% 20 -340deg)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(10% 20 740deg)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(10% 20 -700deg)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(-40% 0 0)", "lch(0% 0 0)"); |
| testComputed("background-color", "lch(20% -20 0)", "lch(20% 0 0)"); |
| // hue (the third argument) can be either an angle or number, with number interpreted as degrees. |
| testComputed("background-color", "lch(0% 0 0 / 0.5)", "lch(0% 0 0 / 0.5)"); |
| testComputed("background-color", "lch(10% 20 20 / 110%)", "lch(10% 20 20)"); |
| testComputed("background-color", "lch(10% 20 -700)", "lch(10% 20 20)"); |
| |
| debug(''); |
| debug('Test invalid values'); |
| testComputed("background-color", "lab(0 0 0)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(0% 0% 0)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(0% 0 0 1)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(0% 0 0 10%)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(0% 0 0deg)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(0% 0% 0deg)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lab(40% 0 0deg)", "rgba(0, 0, 0, 0)"); |
| |
| testComputed("background-color", "lch(0 0 0 / 0.5)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lch(20% 10 10deg 10)", "rgba(0, 0, 0, 0)"); |
| testComputed("background-color", "lch(20% 10 10deg 10 / 0.5)", "rgba(0, 0, 0, 0)"); |
| |
| testComputed("background-color", "color(lab 20% 0 10 / 50%)", "rgba(0, 0, 0, 0)"); |
| |
| </script> |
| |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
