test_color_rounding.html (1687B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Test rounding of CSS color valus</title> 6 <link rel="author" title="Manish Goregaokar" href="mailto:mgoregaokar@mozilla.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <link rel='stylesheet' href='/resources/testharness.css'> 10 </head> 11 <body> 12 <div id="colordiv"></div> 13 <script> 14 15 function do_test(color, computed, reason) { 16 test(function() { 17 var element = document.getElementById('colordiv'); 18 // assume this works; this way we clear any previous state 19 element.style.color = "red"; 20 element.style.color = color; 21 assert_equals(getComputedStyle(element).color, computed); 22 }, `${reason}: ${color}`); 23 } 24 25 do_test("rgb(10%, 10%, 10%, 10%)", "rgba(26, 26, 26, 0.1)", "rgb percent-to-int should round"); 26 do_test("rgb(10%, 10%, 10%)", "rgb(26, 26, 26)", "rgb percent-to-int should round"); 27 do_test("hsl(0, 0%, 90%)", "rgb(230, 230, 230)", "hsl-to rgb should round"); 28 do_test("hsla(0, 0%, 90%, 10%)", "rgba(230, 230, 230, 0.1)", "hsl-to rgb should round"); 29 do_test("rgb(100%, 100%, 0%)", "rgb(255, 255, 0)", "handling of extrema"); 30 do_test("rgba(100%, 100%, 100%, 100%)", "rgb(255, 255, 255)", "handling of extrema"); 31 do_test("rgba(100%, 100%, 100%, 0%)", "rgba(255, 255, 255, 0)", "handling of extrema"); 32 do_test("rgb(255.5, 260, 500, 50)", "rgb(255, 255, 255)", "out of bounds should be handled"); 33 do_test("rgb(254.5, 254.55, 254.45)", "rgb(255, 255, 254)", "number values should be rounded"); 34 do_test("rgb(99.8%, 99.9%, 99.7%)", "rgb(254, 255, 254)", "percentage values should be rounded"); 35 36 </script> 37 </body> 38 </html>