Commit 22309657 authored by Aleks Totic's avatar Aleks Totic Committed by Commit Bot

Reland new wpt tests

Reland of https://chromium-review.googlesource.com/c/chromium/src/+/1471384

Originals failed wpt import

Bug: 907911
Change-Id: Ie97da9f68cf972d31303c7e3ee547e8a184bd52d
Reviewed-on: https://chromium-review.googlesource.com/c/1474709Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Commit-Queue: Aleks Totic <atotic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#632768}
parent 9ba1c235
......@@ -148,6 +148,8 @@ crbug.com/591099 external/wpt/css/css-masking/clip-path/clip-path-circle-008.htm
crbug.com/591099 external/wpt/css/css-masking/clip-path/clip-path-ellipse-007.html [ Failure ]
crbug.com/591099 external/wpt/css/css-masking/clip-path/clip-path-polygon-010.html [ Failure ]
crbug.com/591099 external/wpt/css/css-multicol/multicol-span-all-005.html [ Failure ]
crbug.com/921396 external/wpt/css/css-position/position-absolute-container-dynamic.html [ Failure ]
crbug.com/907911 external/wpt/css/css-position/position-absolute-percentage-height.html [ Pass ]
crbug.com/591099 external/wpt/css/css-position/position-relative-table-tbody-top-absolute-child.html [ Failure ]
crbug.com/591099 external/wpt/css/css-position/position-relative-table-tr-left-absolute-child.html [ Failure ]
crbug.com/591099 external/wpt/css/css-position/static-position/htb-ltr-rtl.tentative.html [ Pass ]
......
<!DOCTYPE html>
<title>CSS Position Absolute: dynamic changes to containing block width</title>
<link rel="author" href="mailto:atotic@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abs-non-replaced-width">
<meta name="assert" content="abspos descendant responds to containing block size change">
<style>
#container {
position: relative;
width: 50px;
height: 100px;
background: red;
}
#target {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: green;
}
</style>
<div id="container">
<div style="display:flex;">
<div id="target"></div>
</div>
</div>
<script>
document.body.offsetTop;
test(() => {
document.getElementById("container").style.width = "100px";
assert_equals(document.querySelector("#target").offsetWidth, 100);
}, '#target used container width when computing size');
</script>
<!DOCTYPE html>
<title>CSS Position Absolute: css-position-3</title>
<link rel="author" href="mailto:atotic@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://www.w3.org/TR/css-position-3/">
<meta name="assert" content="abspos resolves %-ge sizes correctly.">
<style>
#container {
position: relative;
}
#image-wrapper {
display: flex;
position: absolute;
height: 100%;
background: green;
}
#content-wrapper {
margin-left: 30%;
}
#target {
display: block;
min-height: 100%;
opacity: 0.5;
}
</style>
<!-- IMG height is 100% of image wrapper height.
IMG width is 100% of image wrapper width.
IMG width equals IMG height -->
<div id="container">
<div id="image-wrapper">
<!-- 1x1 green pixel -->
<img id="target" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==">
</div>
<div id="content-wrapper">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<script>
document.body.offsetTop;
test(() => {
let target = document.querySelector("#target");
assert_equals(target.offsetWidth, target.offsetHeight);
assert_equals(target.offsetWidth, document.querySelector("#image-wrapper").offsetWidth);
assert_equals(target.offsetHeight, document.querySelector("#content-wrapper").offsetHeight);
}, '#target height matches containing block height, and target parent width matches #target width' );
test(() => {
document.body.style.marginLeft = "300px";
let target = document.querySelector("#target");
assert_equals(target.offsetWidth, target.offsetHeight);
assert_equals(target.offsetWidth, document.querySelector("#image-wrapper").offsetWidth);
assert_equals(target.offsetHeight, document.querySelector("#content-wrapper").offsetHeight);
}, '#target height matches containing block height, and target parent width matches #target width after resize');
</script>
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