border-width-rounding.tentative.html (1656B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Border: width rounding 6 </title> 7 8 <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> 9 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width"> 10 11 <meta name="assert" content="border-width computed value after rounding."> 12 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 </head> 16 <body> 17 <h1> 18 Test passes if border widths are rounded up 19 when they are greater than 0 and less than 1, 20 and rounded down when they are greater than 1. 21 </h1> 22 23 <script> 24 const values = [ 25 { input: "0px", expected: "0px" }, 26 { input: "0.1px", expected: "1px" }, 27 { input: "0.25px", expected: "1px" }, 28 { input: "0.5px", expected: "1px" }, 29 { input: "0.9px", expected: "1px" }, 30 { input: "1px", expected: "1px" }, 31 { input: "1.25px", expected: "1px" }, 32 { input: "1.5px", expected: "1px" }, 33 { input: "2px", expected: "2px" }, 34 { input: "2.75px", expected: "2px" }, 35 { input: "2.999px", expected: "2px" }, 36 ]; 37 38 for (const { input, expected } of values) { 39 const div = document.createElement("div"); 40 div.style = `border: solid ${input} blue; outline: solid ${input} purple; margin-bottom: 20px;`; 41 document.body.appendChild(div); 42 test(function() { 43 assert_equals(getComputedStyle(div).borderWidth, expected); 44 }, `border-width: ${input}`); 45 test(function() { 46 assert_equals(getComputedStyle(div).outlineWidth, expected); 47 }, `outline-width: ${input}`); 48 } 49 </script> 50 </body> 51 </html>