| <!DOCTYPE html> |
| <html> |
| <head> |
| <title> |
| CSS Border: width rounding |
| </title> |
| |
| <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> |
| <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width"> |
| |
| <meta name="assert" content="border-width computed value after rounding."> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <h1> |
| Test passes if border widths are rounded up |
| when they are greater than 0 and less than 1, |
| and rounded down when they are greater than 1. |
| </h1> |
| |
| <script> |
| const values = [ |
| { input: "0px", expected: "0px" }, |
| { input: "0.1px", expected: "1px" }, |
| { input: "0.25px", expected: "1px" }, |
| { input: "0.5px", expected: "1px" }, |
| { input: "0.9px", expected: "1px" }, |
| { input: "1px", expected: "1px" }, |
| { input: "1.25px", expected: "1px" }, |
| { input: "1.5px", expected: "1px" }, |
| { input: "2px", expected: "2px" }, |
| { input: "2.75px", expected: "2px" }, |
| { input: "2.999px", expected: "2px" }, |
| ]; |
| |
| for (const value of values) { |
| const div = document.createElement("div"); |
| div.style = `border: solid ${value.input} blue; margin-bottom: 20px;`; |
| document.body.appendChild(div); |
| } |
| |
| test(function() { |
| var targets = document.querySelectorAll("div"); |
| |
| for (var i=0; i < targets.length; ++i) { |
| assert_equals(getComputedStyle(targets[i]).borderWidth, values[i].expected); |
| } |
| }, "Test that border widths are rounded up when they are greater than 0px but less than 1px, and rounded down when they are greater than 1px."); |
| </script> |
| </body> |
| </html> |
