border-width-cssom.html (1172B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Borders: CSSOM for border-*-width: thin, medium, thick</title> 5 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> 6 <meta name="assert" content="getComputedStyle() for 'border-*-width' with values thin, medium, thick, returns 1px, 3px, and 5px, respectively." /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .thin { border: solid thin; } 11 .medium { border: solid medium; } 12 .thick { border: solid thick; } 13 </style> 14 </head> 15 <body> 16 <div class=thin data-expected=1px></div> 17 <div class=medium data-expected=3px></div> 18 <div class=thick data-expected=5px></div> 19 <script> 20 let divs = document.querySelectorAll('div'); 21 let props = ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']; 22 for (let div of divs) { 23 let style = getComputedStyle(div); 24 for (let prop of props) { 25 test(() => { 26 assert_equals(style.getPropertyValue(prop), div.dataset.expected); 27 }, `${prop}: ${div.className} is ${div.dataset.expected}`); 28 } 29 } 30 </script> 31 </body> 32 </html>