124 lines
3.6 KiB
HTML
124 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../../../resources/testharness.js"></script>
|
|
<script src="../../../resources/testharnessreport.js"></script>
|
|
<script src="../resources/subpixel-utils.js"></script>
|
|
<style>
|
|
#container {
|
|
font: 10px/1 Ahem, sans-serif;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
-webkit-writing-mode: vertical-lr;
|
|
}
|
|
|
|
#rounded-rect {
|
|
float: left;
|
|
-webkit-writing-mode: horizontal-tb;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
border-radius: 50px 40px 30px 20px / 20px 30px 40px 50px;
|
|
-webkit-shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px);
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<p>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</p>
|
|
<div id="container">
|
|
<span id="s1">X</span><br/>
|
|
<div id="rounded-rect"></div>
|
|
<span id="s2">X</span><br/>
|
|
<span id="s3">X</span><br/>
|
|
<span id="s4">X</span><br/>
|
|
<span id="s5">X</span><br/>
|
|
<span id="s6">X</span><br/>
|
|
<span id="s7">X</span><br/>
|
|
<span id="s8">X</span><br/>
|
|
<span id="s9">X</span><br/>
|
|
<span id="s10">X</span><br/>
|
|
<span id="s11">X</span><br/>
|
|
<span id="s12">X</span>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
function elementRect(elementId)
|
|
{
|
|
var s = document.getElementById("container").getBoundingClientRect();
|
|
var r = document.getElementById(elementId).getBoundingClientRect();
|
|
return {left: Math.round(r.left) - Math.round(s.left), top: Math.round(r.top) - Math.round(s.top), width: Math.round(r.width), height: Math.round(r.height)};
|
|
}
|
|
|
|
test(function () {
|
|
var rect = elementRect("s1");
|
|
assert_equals(rect.left, 1);
|
|
assert_equals(rect.top, 1);
|
|
}, "1st square doesn't overlap shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s2");
|
|
assert_equals(rect.left, 11);
|
|
assert_approx_equals(rect.top, 91, 0.1);
|
|
}, "2nd square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s3");
|
|
assert_equals(rect.left, 21);
|
|
assert_approx_equals(rect.top, 97, 0.1);
|
|
}, "3rd square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s4");
|
|
assert_equals(rect.left, 31);
|
|
assert_approx_equals(rect.top, 100, 0.1);
|
|
}, "4th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s5");
|
|
assert_equals(rect.left, 41);
|
|
assert_approx_equals(rect.top, 101, 0.1);
|
|
}, "5th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s6");
|
|
assert_equals(rect.left, 51);
|
|
assert_approx_equals(rect.top, 101, 0.1);
|
|
}, "6th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s7");
|
|
assert_equals(rect.left, 61);
|
|
assert_approx_equals(rect.top, 101, 0.1);
|
|
}, "7th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s8");
|
|
assert_equals(rect.left, 71);
|
|
assert_approx_equals(rect.top, 101, 0.1);
|
|
}, "8th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s9");
|
|
assert_equals(rect.left, 81);
|
|
assert_approx_equals(rect.top, 101, 0.1);
|
|
}, "9th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s10");
|
|
assert_equals(rect.left, 91);
|
|
assert_approx_equals(rect.top, 99, 0.1);
|
|
}, "10th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s11");
|
|
assert_equals(rect.left, 101);
|
|
assert_approx_equals(rect.top, 91, 0.1);
|
|
}, "11th square is properly affected by shape.");
|
|
|
|
test(function () {
|
|
var rect = elementRect("s12");
|
|
assert_equals(rect.left, 111);
|
|
assert_equals(rect.top, 1);
|
|
}, "12th square doesn't overlap shape.");
|
|
</script>
|