| <html> |
| <head> |
| |
| <style> |
| #border-box { |
| box-sizing: border-box; |
| width: 55px; |
| height: 55px; |
| margin: 1px; |
| padding: 7px; |
| border: 3px solid black; |
| } |
| |
| #content-box { |
| box-sizing: content-box; |
| width: 55px; |
| height: 55px; |
| margin: 1px; |
| padding: 7px; |
| border: 3px solid black; |
| } |
| </style> |
| |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| |
| function dumpDimensions() |
| { |
| var element; |
| |
| element = document.getElementById("content-box"); |
| document.getElementById("output-content").textContent = "content-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight; |
| element = document.getElementById("border-box"); |
| document.getElementById("output-border").textContent = "border-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight; |
| } |
| |
| function test() |
| { |
| var contentWidthElement; |
| var contentHeightElement; |
| |
| function getChildTextByClassName(element, className) |
| { |
| var children = element.children; |
| for (var i = 0; i < children.length; ++i) { |
| if (children[i].classList && children[i].classList.contains(className)) |
| return children[i].textContent; |
| } |
| return null; |
| } |
| |
| function dumpMetrics(sectionElement) |
| { |
| var marginElement = sectionElement.getElementsByClassName("margin")[0]; |
| var borderElement = sectionElement.getElementsByClassName("border")[0]; |
| var paddingElement = sectionElement.getElementsByClassName("padding")[0]; |
| var contentDimensions = sectionElement.getElementsByClassName("content")[0].getElementsByTagName("span"); |
| InspectorTest.addResult("margin: " + getChildTextByClassName(marginElement, "top") + " " + getChildTextByClassName(marginElement, "right") + " " + getChildTextByClassName(marginElement, "bottom") + " " + getChildTextByClassName(marginElement, "left")); |
| InspectorTest.addResult("border: " + getChildTextByClassName(borderElement, "top") + " " + getChildTextByClassName(borderElement, "right") + " " + getChildTextByClassName(borderElement, "bottom") + " " + getChildTextByClassName(borderElement, "left")); |
| InspectorTest.addResult("padding: " + getChildTextByClassName(paddingElement, "top") + " " + getChildTextByClassName(paddingElement, "right") + " " + getChildTextByClassName(paddingElement, "bottom") + " " + getChildTextByClassName(paddingElement, "left")); |
| InspectorTest.addResult("content: " + contentDimensions[0].textContent + " x " + contentDimensions[1].textContent); |
| } |
| |
| function createDoubleClickEvent() |
| { |
| var event = document.createEvent("MouseEvent"); |
| event.initMouseEvent("dblclick", true, true, null, 2, 0, 0, 0, 0, false, false, false, false, 0, null); |
| return event; |
| } |
| |
| InspectorTest.runTestSuite([ |
| function testBorderBoxInit1(next) |
| { |
| InspectorTest.selectNodeAndWaitForStyles("border-box", next); |
| }, |
| |
| function testBorderBoxInit2(next) |
| { |
| section = WebInspector.panels.elements.sidebarPanes.metrics; |
| section.expand(); |
| InspectorTest.runAfterPendingDispatches(next); |
| }, |
| |
| function testInitialBorderBoxMetrics(next) |
| { |
| var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span"); |
| contentWidthElement = spanElements[0]; |
| contentHeightElement = spanElements[1]; |
| InspectorTest.addResult("=== Initial border-box ==="); |
| dumpMetrics(section.element); |
| contentWidthElement.dispatchEvent(createDoubleClickEvent()); |
| contentWidthElement.textContent = "60"; |
| contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter")); |
| InspectorTest.runAfterPendingDispatches(next); |
| }, |
| |
| function testModifiedBorderBoxMetrics(next) |
| { |
| InspectorTest.addResult("=== Modified border-box ==="); |
| dumpMetrics(section.element); |
| next(); |
| }, |
| |
| function testContentBoxInit1(next) |
| { |
| InspectorTest.selectNodeWithId("content-box", next); |
| }, |
| |
| function testContentBoxInit2(next) |
| { |
| section = WebInspector.panels.elements.sidebarPanes.metrics; |
| section.expand(); |
| InspectorTest.runAfterPendingDispatches(next); |
| }, |
| |
| function testInitialContentBoxMetrics(next) |
| { |
| var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span"); |
| contentWidthElement = spanElements[0]; |
| contentHeightElement = spanElements[1]; |
| InspectorTest.addResult("=== Initial content-box ==="); |
| dumpMetrics(section.element); |
| contentWidthElement.dispatchEvent(createDoubleClickEvent()); |
| contentWidthElement.textContent = "60"; |
| contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter")); |
| InspectorTest.runAfterPendingDispatches(next); |
| next(); |
| }, |
| |
| function testModifiedContentBoxMetrics(next) |
| { |
| function callback() |
| { |
| next(); |
| } |
| |
| InspectorTest.addResult("=== Modified content-box ==="); |
| dumpMetrics(section.element); |
| InspectorTest.evaluateInPage("dumpDimensions()", callback); |
| } |
| ]); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <p> |
| Tests that content-box and border-box content area dimensions are handled property by the Metrics pane. |
| </p> |
| <div id="content-box">content-box</div> |
| <div id="border-box">border-box</div> |
| <div id="output-content">zzz</div> |
| <div id="output-border">zzz</div> |
| </body> |
| </html> |
