Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #6662 - tschneidereit:client-geometry, r=glennw,pcwatson

Browse source 
Implement Element.client{Top,Left,Width,Height}

This isn't done, but contains a working implementation of at least `clientTop`. Feedback would be much appreciated: it's probably far from ideal.

Implementing `clientLeft` is straight-forward, I think, but `clientWidth` and `clientHeight` require accessing the `border_box` - and I don't know how that works, yet.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/6662)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-07-27 20:45:05 -06:00
commit e0bd80f807
8 changed files with 217 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -287,6 +287,12 @@
"url": "/_mozilla/mozilla/child_reparenting.html"
}
],
"mozilla/client-top-left-height-width.html": [
{
"path": "mozilla/client-top-left-height-width.html",
"url": "/_mozilla/mozilla/client-top-left-height-width.html"
}
],
"mozilla/collections.html": [
{
"path": "mozilla/collections.html",

105
tests/wpt/mozilla/tests/mozilla/client-top-left-height-width.html Normal file
View file

@ -0,0 +1,105 @@
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {
font-family: 'ahem';
src: url(../css/fonts/ahem/ahem.ttf);
}
#no-border {
width: 100px;
height: 100px;
}
#with-border {
border: 10px solid black;
width: 100px;
height: 100px;
}
#with-border-and-padding {
border: 10px solid black;
padding: 10px;
width: 100px;
height: 100px;
}
#abs1 {
position: absolute;
background-color: red;
top: 45px;
left: 155px;
width: 100px;
height: 120px;
}
#abs2 {
position: absolute;
background-color: green;
top: 5px;
left: 5px;
width: 80px;
height: 80px;
}
#abs3 {
position: absolute;
background-color: blue;
top: 12px;
left: 14px;
width: 48px;
height: 40px;
}
#span1 {
font-family: 'ahem';
font-size: 20px;
line-height: 1;
}
#rotated {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(45deg);
}
#inline-block {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#display-none {
width: 100px;
height: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<div id="no-border">my div</div>
<div id="with-border">my div</div>
<div id="with-border-and-padding">my div</div>
<div id="abs1">
<span id="span1">X</span>
</div>
<div id='rotated'>rotated</div>
<div id='inline-block'>inline-block</div>
<div id='display-none'>display-none</div>
<script>
function test_rect(name, left, top, height, width) {
var div = document.getElementById(name);
var rect = div.getBoundingClientRect();
assert_equals(div.clientLeft, left);
assert_equals(div.clientTop, top);
assert_equals(div.clientHeight, height);
assert_equals(div.clientWidth, width);
}
test(function() { test_rect('no-border', 0, 0, 100, 100); }, 'Block without border');
test(function() { test_rect('with-border', 10, 10, 100, 100); }, 'Block with border');
test(function() { test_rect('with-border-and-padding', 10, 10, 120, 120); }, 'Block without border and padding');
test(function() { test_rect('abs1', 0, 0, 120, 100); }, 'Absolutely positioned block');
test(function() { test_rect('rotated', 0, 0, 100, 100); }, 'Rotated block');
test(function() { test_rect('span1', 0, 0, 0, 0); }, 'Span');
test(function() { test_rect('inline-block', 0, 0, 100, 100); }, 'Inline block');
test(function() { test_rect('display-none', 0, 0, 0, 0); }, 'display: none');
</script>
</body>
</html>