[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / LayoutTests / css3 / calc / color-rgb.html
1 <!DOCTYPE HTML>
2 <script src="../../resources/js-test-pre.js"></script>
3 <style>
4     #controlsimple { color: rgb(10,180,30); }
5     #simple        { color: rgb(calc(10),calc(18 * 10),calc(30)); }
6     #controlpercentsimple { color: rgb(10%,95%,30%); }
7     #percentsimple        { color: rgb(calc(2% + 8%),calc(95%),calc(3% * 10)); }
8     #controlpercentnumber { color: rgb(26,240,80); }
9     #percentnumber        { color: rgb(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4)); }
10
11     #controlalpha { color: rgba(10,180,30,0.7); }
12     #alpha        { color: rgba(calc(10),calc(180),calc(30), calc(0.35 * 2)); }
13     #controlpercentalpha { color: rgba(10%,95%,30%,0.7); }
14     #percentalpha        { color: rgba(calc(2 * 5%),calc(100% - 5%),calc(30%),calc(0.2 * 3 + 0.1)); }
15     #controlpercentnumberalpha { color: rgba(26,240,80, 0.5); }
16     #percentnumberalpha        { color: rgba(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4), calc(1.0 / 2)); }
17 </style>
18 <div id="test-container">
19     <hr/>
20     <div id="controlsimple">These two sentences should be the same color (simple)</div>
21     <div id="simple">These two sentences should be the same color (simple)</div>
22     <hr/>
23     <div id="controlpercentsimple">These two sentences should be the same color (simple percent)</div>
24     <div id="percentsimple">These two sentences should  be the same color (simple percent)</div>
25     <hr/>
26     <div id="controlpercentnumber">These two sentences should be the same color (percent number)</div>
27     <div id="percentnumber">These two sentences should  be the same color (percent number)</div>
28     <hr/>
29     <div id="controlalpha">These two sentences should be the same color (alpha)</div>
30     <div id="alpha">These two sentences should be the same color (alpha)</div>
31     <hr/>
32     <div id="controlpercentalpha">These two sentences should  be the same color (percent alpha)</div>
33     <div id="percentalpha">These two sentences should  be the same color (percent alpha)</div>
34     <hr/>
35     <div id="controlpercentnumberalpha">These two sentences should be the same color (percent number alpha)</div>
36     <div id="percentnumberalpha">These two sentences should  be the same color (percent number alpha)</div>
37 </div>
38 <script>
39     description("Tests that CSS3 calc() can be used with the rgb() and rgba() functions");
40     
41     tests = ["simple", "percentsimple", "percentnumber", "alpha", "percentalpha", "percentnumberalpha"];
42
43     for (i = 0; i < tests.length; i++) {
44         var test = tests[i];
45         shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color);
46     }
47
48     if (window.testRunner)
49         document.body.removeChild(document.getElementById("test-container"));
50 </script>
51 <script src="../../resources/js-test-post.js"></script>