Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(33)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html

Issue 13871003: Fixing getComputedStyle to return pixel values for left / right / top / bottom (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixing a const issue. Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/css/getComputedStyle/computed-style-negative-top-expected.txt ('k') | LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html
diff --git a/LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html
new file mode 100644
index 0000000000000000000000000000000000000000..dd8803e0d63b815b9c0eb8beff25ea1bce522b5a
--- /dev/null
+++ b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="../../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<style>
+
+.relative200x400 {
+ position: relative;
+ width: 200px;
+ height: 400px;
+ font-size: 10px;
+}
+
+#test {
+ position: absolute;
+}
+
+</style>
+<div id="tests">
+<div class="relative200x400"><div id="test"></div></div>
+</div>
+<script>
+
+description("Test to make sure top/bottom/left/right properly returns pixel values for any input.")
+
+var test = document.getElementById('test');
+
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('No offsets (zero width/height)');
+debug('');
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'400px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+// On padding/border/margin on actual node
+debug('');
+evalAndLog("test.setAttribute('style', 'padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'190px'");
+shouldBe("getComputedStyle(test).bottom", "'390px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+debug('');
+evalAndLog("test.setAttribute('style', 'border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'190px'");
+shouldBe("getComputedStyle(test).bottom", "'390px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+debug('');
+evalAndLog("test.setAttribute('style', 'margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'190px'");
+shouldBe("getComputedStyle(test).bottom", "'390px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+evalAndLog("test.setAttribute('style', '')");
+
+// On padding/border/margin on parent node
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'5px'");
+shouldBe("getComputedStyle(test).left", "'5px'");
+shouldBe("getComputedStyle(test).right", "'205px'");
+shouldBe("getComputedStyle(test).bottom", "'405px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'400px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'400px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'0px'");
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('No offsets (50px width/height)');
+debug('');
+var commonStyle = "width: 50px; height: 50px;";
+evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+// On padding/border/margin on actual node
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'140px'");
+shouldBe("getComputedStyle(test).bottom", "'340px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'140px'");
+shouldBe("getComputedStyle(test).bottom", "'340px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'140px'");
+shouldBe("getComputedStyle(test).bottom", "'340px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+evalAndLog("test.removeAttribute('style', 'margin')");
+
+// On padding/border/margin on parent node
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'5px'");
+shouldBe("getComputedStyle(test).left", "'5px'");
+shouldBe("getComputedStyle(test).right", "'155px'");
+shouldBe("getComputedStyle(test).bottom", "'355px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'50px'");
+shouldBe("getComputedStyle(test).height", "'50px'");
+
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('No offsets (100% width/height)');
+debug('');
+var commonStyle = "width: 100%; height: 100%;";
+evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'0px'");
+shouldBe("getComputedStyle(test).bottom", "'0px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+
+// On padding/border/margin on actual node
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'-10px'");
+shouldBe("getComputedStyle(test).bottom", "'-10px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+evalAndLog("test.removeAttribute('style', 'padding')");
+
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'-10px'");
+shouldBe("getComputedStyle(test).bottom", "'-10px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+evalAndLog("test.removeAttribute('style', 'border')");
+
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+" margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'-10px'");
+shouldBe("getComputedStyle(test).bottom", "'-10px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+evalAndLog("test.removeAttribute('style', 'margin')");
+
+// On padding/border/margin on parent node
+debug('');
+evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
+shouldBe("getComputedStyle(test).top", "'5px'");
+shouldBe("getComputedStyle(test).left", "'5px'");
+shouldBe("getComputedStyle(test).right", "'-5px'");
+shouldBe("getComputedStyle(test).bottom", "'-5px'");
+shouldBe("getComputedStyle(test).width", "'210px'");
+shouldBe("getComputedStyle(test).height", "'410px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'0px'");
+shouldBe("getComputedStyle(test).bottom", "'0px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
+shouldBe("getComputedStyle(test).top", "'0px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'0px'");
+shouldBe("getComputedStyle(test).bottom", "'0px'");
+shouldBe("getComputedStyle(test).width", "'200px'");
+shouldBe("getComputedStyle(test).height", "'400px'");
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('% offsets (top/left)');
+debug('');
+evalAndLog("test.setAttribute('style', 'top: 10%; left: 10%; width: 50%; height: 60%;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'80px'");
+shouldBe("getComputedStyle(test).bottom", "'120px'");
+shouldBe("getComputedStyle(test).width", "'100px'");
+shouldBe("getComputedStyle(test).height", "'240px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
+shouldBe("getComputedStyle(test).top", "'45px'");
+shouldBe("getComputedStyle(test).left", "'25px'");
+shouldBe("getComputedStyle(test).right", "'100px'");
+shouldBe("getComputedStyle(test).bottom", "'135px'");
+shouldBe("getComputedStyle(test).width", "'125px'");
+shouldBe("getComputedStyle(test).height", "'270px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'padding')");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'80px'");
+shouldBe("getComputedStyle(test).bottom", "'120px'");
+shouldBe("getComputedStyle(test).width", "'100px'");
+shouldBe("getComputedStyle(test).height", "'240px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'border')");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'80px'");
+shouldBe("getComputedStyle(test).bottom", "'120px'");
+shouldBe("getComputedStyle(test).width", "'100px'");
+shouldBe("getComputedStyle(test).height", "'240px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'margin')");
+
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('% offsets (right/bottom)');
+debug('');
+evalAndLog("test.setAttribute('style', 'right: 10%; bottom: 10%; width: 90%; height: 80%;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'20px'");
+shouldBe("getComputedStyle(test).bottom", "'40px'");
+shouldBe("getComputedStyle(test).width", "'180px'");
+shouldBe("getComputedStyle(test).height", "'320px'");
+
+
+// On padding/border/margin on parent node
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
+shouldBe("getComputedStyle(test).top", "'45px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'25px'");
+shouldBe("getComputedStyle(test).bottom", "'45px'");
+shouldBe("getComputedStyle(test).width", "'225px'");
+shouldBe("getComputedStyle(test).height", "'360px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'padding')");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'20px'");
+shouldBe("getComputedStyle(test).bottom", "'40px'");
+shouldBe("getComputedStyle(test).width", "'180px'");
+shouldBe("getComputedStyle(test).height", "'320px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'border')");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
+shouldBe("getComputedStyle(test).top", "'40px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'20px'");
+shouldBe("getComputedStyle(test).bottom", "'40px'");
+shouldBe("getComputedStyle(test).width", "'180px'");
+shouldBe("getComputedStyle(test).height", "'320px'");
+evalAndLog("test.parentNode.removeAttribute('style', 'margin')");
+
+
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('em offsets');
+debug('');
+evalAndLog("test.setAttribute('style', 'top: 1em; left: 2em; width: 3em; height: 4em;')");
+shouldBe("getComputedStyle(test).top", "'10px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'30px'");
+shouldBe("getComputedStyle(test).height", "'40px'");
+
+// On padding/border/margin on parent node
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
+shouldBe("getComputedStyle(test).top", "'10px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'400px'");
+shouldBe("getComputedStyle(test).width", "'30px'");
+shouldBe("getComputedStyle(test).height", "'40px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
+shouldBe("getComputedStyle(test).top", "'10px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'30px'");
+shouldBe("getComputedStyle(test).height", "'40px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
+shouldBe("getComputedStyle(test).top", "'10px'");
+shouldBe("getComputedStyle(test).left", "'20px'");
+shouldBe("getComputedStyle(test).right", "'150px'");
+shouldBe("getComputedStyle(test).bottom", "'350px'");
+shouldBe("getComputedStyle(test).width", "'30px'");
+shouldBe("getComputedStyle(test).height", "'40px'");
+
+//-----------------------------------------------------------------------------
+debug('');
+debug('Absolute Offsets');
+debug('');
+evalAndLog("test.setAttribute('style', 'position: absolute; top: 30px; height: 300px;')");
+shouldBe("getComputedStyle(test).top", "'30px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'70px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'300px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
+shouldBe("getComputedStyle(test).top", "'30px'");
+shouldBe("getComputedStyle(test).left", "'25px'");
+shouldBe("getComputedStyle(test).right", "'225px'");
+shouldBe("getComputedStyle(test).bottom", "'120px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'300px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
+shouldBe("getComputedStyle(test).top", "'30px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'70px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'300px'");
+
+debug('');
+evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
+shouldBe("getComputedStyle(test).top", "'30px'");
+shouldBe("getComputedStyle(test).left", "'0px'");
+shouldBe("getComputedStyle(test).right", "'200px'");
+shouldBe("getComputedStyle(test).bottom", "'70px'");
+shouldBe("getComputedStyle(test).width", "'0px'");
+shouldBe("getComputedStyle(test).height", "'300px'");
+
+</script>
+<script src="../../js/resources/js-test-post.js"></script>
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/css/getComputedStyle/computed-style-negative-top-expected.txt ('k') | LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698