| <!DOCTYPE html> | |
| <title>CSS Basic User Interface Test: box-sizing:border-box resolved values</title> | |
| <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> | |
| <link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> | |
| <meta charset="utf-8"> | |
| <script src="/resources/testharness.js"></script> | |
| <script src="/resources/testharnessreport.js"></script> | |
| <style> | |
| #test { | |
| box-sizing: border-box; | |
| border: 10px solid blue; | |
| padding: 10px; | |
| width: 100px; | |
| height: 100px; | |
| } | |
| </style> | |
| <body> | |
| <div id=test></div> | |
| <div id=log></div> | |
| <script> | |
| test( | |
| function(){ | |
| var test = document.getElementById("test"); | |
| assert_equals(window.getComputedStyle(test)["width"], "100px"); | |
| }, "Check the resolved value of 'width' when box-sizing is border-box."); | |
| test( | |
| function(){ | |
| var test = document.getElementById("test"); | |
| assert_equals(window.getComputedStyle(test)["height"], "100px"); | |
| }, "Check the resolved value of 'height' when box-sizing is border-box."); | |
| </script> | |
| </body> | |
| </html> |