Commit 69dbc4d0 authored by Fredrik Söderqvist's avatar Fredrik Söderqvist Committed by Commit Bot

Add foreignObject tests from a few bugs

 * fO with composited descendant under other fO.

 * gBCR on fO and fO descendant.

Bug: 738022, 848693, 976224, 1066421, 1111779
Change-Id: I0ea5e23ec4466fc206acdc60e04ae8582c587bdc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2419011
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Auto-Submit: Fredrik Söderquist <fs@opera.com>
Reviewed-by: default avatarStephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808421}
parent 8f1d3e6d
<!doctype html>
<title>foreignObject: Element.prototype.getBoundingClientRect()</title>
<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#descendant {
width: 100px;
height: 60px;
margin: 6px 12px;
background-color: blue;
}
</style>
<svg>
<foreignObject x="20" y="10" width="200" height="100">
<div id="descendant"></div>
</foreignObject>
</svg>
<script>
function checkBoundingRect(element, bounds) {
let boundingRect = element.getBoundingClientRect();
for (let prop of ['left', 'top', 'width', 'height'])
assert_equals(boundingRect[prop], bounds[prop], prop);
}
test(function() {
checkBoundingRect(document.querySelector('foreignObject'),
{ left: 28, top: 18, width: 200, height: 100 });
checkBoundingRect(document.querySelector('foreignObject > div'),
{ left: 40, top: 24, width: 100, height: 60 });
});
</script>
<!doctype html>
<title>fO with positioned descendants overlapping a fO with 'will-change: transform' child</title>
<link rel="match" href="../../struct/reftests/reference/green-100x100.html">
<style>
#outer {
position: relative;
width: 50px;
margin: 0 25px;
background-color: red;
}
#inner {
position: relative;
width: 50px;
height: 100px;
background-color: green;
}
#willtransform {
will-change: transform;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<svg>
<foreignObject width="100" height="100">
<div id="willtransform"></div>
</foreignObject>
<foreignObject width="100" height="100">
<div id="outer"><div id="inner"></div></div>
</foreignObject>
</svg>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment