1 <!DOCTYPE html>
2 <html><head><title>CSS Basic User Interface Test: box-sizing:border-box resolved values</title>
3 <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
4 <link href="https://drafts.csswg.org/css-ui-3/#box-sizing" rel="help">
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 </head><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
34
35 </body></html>