6 box-sizing: border-box;
11 border: 3px solid black;
15 box-sizing: content-box;
20 border: 3px solid black;
24 <script src="../../http/tests/inspector/inspector-test.js"></script>
25 <script src="../../http/tests/inspector/elements-test.js"></script>
28 function dumpDimensions()
32 element = document.getElementById("content-box");
33 document.getElementById("output-content").textContent = "content-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
34 element = document.getElementById("border-box");
35 document.getElementById("output-border").textContent = "border-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
40 var contentWidthElement;
41 var contentHeightElement;
43 function getChildTextByClassName(element, className)
45 var children = element.children;
46 for (var i = 0; i < children.length; ++i) {
47 if (children[i].classList && children[i].classList.contains(className))
48 return children[i].textContent;
53 function dumpMetrics(sectionElement)
55 var marginElement = sectionElement.getElementsByClassName("margin")[0];
56 var borderElement = sectionElement.getElementsByClassName("border")[0];
57 var paddingElement = sectionElement.getElementsByClassName("padding")[0];
58 var contentDimensions = sectionElement.getElementsByClassName("content")[0].getElementsByTagName("span");
59 InspectorTest.addResult("margin: " + getChildTextByClassName(marginElement, "top") + " " + getChildTextByClassName(marginElement, "right") + " " + getChildTextByClassName(marginElement, "bottom") + " " + getChildTextByClassName(marginElement, "left"));
60 InspectorTest.addResult("border: " + getChildTextByClassName(borderElement, "top") + " " + getChildTextByClassName(borderElement, "right") + " " + getChildTextByClassName(borderElement, "bottom") + " " + getChildTextByClassName(borderElement, "left"));
61 InspectorTest.addResult("padding: " + getChildTextByClassName(paddingElement, "top") + " " + getChildTextByClassName(paddingElement, "right") + " " + getChildTextByClassName(paddingElement, "bottom") + " " + getChildTextByClassName(paddingElement, "left"));
62 InspectorTest.addResult("content: " + contentDimensions[0].textContent + " x " + contentDimensions[1].textContent);
65 function createDoubleClickEvent()
67 var event = document.createEvent("MouseEvent");
68 event.initMouseEvent("dblclick", true, true, null, 2, 0, 0, 0, 0, false, false, false, false, 0, null);
72 InspectorTest.runTestSuite([
73 function testBorderBoxInit1(next)
75 InspectorTest.selectNodeAndWaitForStyles("border-box", next);
78 function testBorderBoxInit2(next)
80 section = WebInspector.panels.elements.sidebarPanes.metrics;
82 InspectorTest.runAfterPendingDispatches(next);
85 function testInitialBorderBoxMetrics(next)
87 var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
88 contentWidthElement = spanElements[0];
89 contentHeightElement = spanElements[1];
90 InspectorTest.addResult("=== Initial border-box ===");
91 dumpMetrics(section.element);
92 contentWidthElement.dispatchEvent(createDoubleClickEvent());
93 contentWidthElement.textContent = "60";
94 contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
95 InspectorTest.runAfterPendingDispatches(next);
98 function testModifiedBorderBoxMetrics(next)
100 InspectorTest.addResult("=== Modified border-box ===");
101 dumpMetrics(section.element);
105 function testContentBoxInit1(next)
107 InspectorTest.selectNodeWithId("content-box", next);
110 function testContentBoxInit2(next)
112 section = WebInspector.panels.elements.sidebarPanes.metrics;
114 InspectorTest.runAfterPendingDispatches(next);
117 function testInitialContentBoxMetrics(next)
119 var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
120 contentWidthElement = spanElements[0];
121 contentHeightElement = spanElements[1];
122 InspectorTest.addResult("=== Initial content-box ===");
123 dumpMetrics(section.element);
124 contentWidthElement.dispatchEvent(createDoubleClickEvent());
125 contentWidthElement.textContent = "60";
126 contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
127 InspectorTest.runAfterPendingDispatches(next);
131 function testModifiedContentBoxMetrics(next)
138 InspectorTest.addResult("=== Modified content-box ===");
139 dumpMetrics(section.element);
140 InspectorTest.evaluateInPage("dumpDimensions()", callback);
147 <body onload="runTest()">
149 Tests that content-box and border-box content area dimensions are handled property by the Metrics pane.
151 <div id="content-box">content-box</div>
152 <div id="border-box">border-box</div>
153 <div id="output-content">zzz</div>
154 <div id="output-border">zzz</div>