| <!DOCTYPE HTML> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| #controlsimple { color: rgb(10,180,30); } |
| #simple { color: rgb(calc(10),calc(18 * 10),calc(30)); } |
| #controlpercentsimple { color: rgb(10%,95%,30%); } |
| #percentsimple { color: rgb(calc(2% + 8%),calc(95%),calc(3% * 10)); } |
| #controlpercentnumber { color: rgb(26,240,80); } |
| #percentnumber { color: rgb(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4)); } |
| |
| #controlalpha { color: rgba(10,180,30,0.7); } |
| #alpha { color: rgba(calc(10),calc(180),calc(30), calc(0.35 * 2)); } |
| #controlpercentalpha { color: rgba(10%,95%,30%,0.7); } |
| #percentalpha { color: rgba(calc(2 * 5%),calc(100% - 5%),calc(30%),calc(0.2 * 3 + 0.1)); } |
| #controlpercentnumberalpha { color: rgba(26,240,80, 0.5); } |
| #percentnumberalpha { color: rgba(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4), calc(1.0 / 2)); } |
| </style> |
| <div id="test-container"> |
| <hr/> |
| <div id="controlsimple">These two sentences should be the same color (simple)</div> |
| <div id="simple">These two sentences should be the same color (simple)</div> |
| <hr/> |
| <div id="controlpercentsimple">These two sentences should be the same color (simple percent)</div> |
| <div id="percentsimple">These two sentences should be the same color (simple percent)</div> |
| <hr/> |
| <div id="controlpercentnumber">These two sentences should be the same color (percent number)</div> |
| <div id="percentnumber">These two sentences should be the same color (percent number)</div> |
| <hr/> |
| <div id="controlalpha">These two sentences should be the same color (alpha)</div> |
| <div id="alpha">These two sentences should be the same color (alpha)</div> |
| <hr/> |
| <div id="controlpercentalpha">These two sentences should be the same color (percent alpha)</div> |
| <div id="percentalpha">These two sentences should be the same color (percent alpha)</div> |
| <hr/> |
| <div id="controlpercentnumberalpha">These two sentences should be the same color (percent number alpha)</div> |
| <div id="percentnumberalpha">These two sentences should be the same color (percent number alpha)</div> |
| </div> |
| <script> |
| description("Tests that CSS3 calc() can be used with the rgb() and rgba() functions"); |
| |
| tests = ["simple", "percentsimple", "percentnumber", "alpha", "percentalpha", "percentnumberalpha"]; |
| |
| for (i = 0; i < tests.length; i++) { |
| var test = tests[i]; |
| shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color); |
| } |
| |
| if (window.testRunner) |
| document.body.removeChild(document.getElementById("test-container")); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
