Bug Tracker

Ticket #6982: boxsizing.html

File boxsizing.html, 826 bytes (added by davidflanagan, 9 years ago)

test case

Line 
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div.content {
6  -moz-box-sizing: content-box;
7  -webkit-box-sizing: content-box;
8  box-sizing: content-box;
9  width: 200px;
10  height: 100px;
11  padding: 10px;
12  border: solid black 10px;
13}
14
15div.border {
16  -moz-box-sizing: border-box;
17  -webkit-box-sizing: border-box;
18  box-sizing: border-box;
19  width: 200px;
20  height: 100px;
21  padding: 10px;
22  border: solid black 10px;
23}
24</style>
25<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
26<script>
27$(function() {
28    $("div").each(function() {
29        var e = $(this);
30        e.width(300);       // Set the width
31        e.text(e.width());  // Queried width is different for border-box
32    });
33});
34</script>
35</head>
36<body>
37    Content box:
38<div class="content"></div>
39    Border box:
40<div class="border"></div>
41</body>
42</html>