box-sizing-027.html (1015B)
1 <!DOCTYPE html> 2 <title>CSS Basic User Interface Test: box-sizing:border-box resolved values</title> 3 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 4 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> 5 <meta charset="utf-8"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #test { 10 box-sizing: border-box; 11 border: 10px solid blue; 12 padding: 10px; 13 width: 100px; 14 height: 100px; 15 } 16 </style> 17 <body> 18 <div id=test></div> 19 <div id=log></div> 20 21 <script> 22 test( 23 function(){ 24 var test = document.getElementById("test"); 25 assert_equals(window.getComputedStyle(test)["width"], "100px"); 26 }, "Check the resolved value of 'width' when box-sizing is border-box."); 27 test( 28 function(){ 29 var test = document.getElementById("test"); 30 assert_equals(window.getComputedStyle(test)["height"], "100px"); 31 }, "Check the resolved value of 'height' when box-sizing is border-box."); 32 </script> 33 </body> 34 </html>