outline-width-rounding.tentative.html (1638B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Outline: 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-ui-4/#outline-width"> 10 11 <meta name="assert" content="outline-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 outline widths are rounded up 19 when they are greater than 0px and less than 1px, 20 and rounded down when they are greater than 1px. 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.99px", expected: "2px" }, 36 { input: "3px", expected: "3px" }, 37 ]; 38 39 for (const value of values) { 40 const div = document.createElement("div"); 41 div.style = `outline: solid ${value.input} green; margin-bottom: 20px;`; 42 document.body.appendChild(div); 43 } 44 45 var targets = document.querySelectorAll("div"); 46 47 for (var i=0; i < targets.length; ++i) { 48 test(() => { 49 assert_equals(getComputedStyle(targets[i]).outlineWidth, values[i].expected); 50 }, values[i].input); 51 } 52 </script> 53 </body> 54 </html>