Skip to content

GitLab

T
tangled
Commit c3f69282 authored by Aleks Totic's avatar Aleks Totic Committed by Commit Bot
Browse files
Options

New wpt tests for absolute position 

Tests buggy code paths in NG and Legacy.

Bug: 907911
Change-Id: I38f22f3673576a776fbe7e89f1cc8452b99d3ded
Reviewed-on: https://chromium-review.googlesource.com/c/1471384Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Commit-Queue: Aleks Totic <atotic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#632391}
parent bca365b5
Show whitespace changes
Inline Side-by-side
Showing with 96 additions and 0 deletions
third_party/blink/web_tests/FlagExpectations/enable-blink-features=LayoutNG
View file @ c3f69282
......@@ -148,6 +148,7 @@ 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/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 ]
......
third_party/blink/web_tests/TestExpectations
View file @ c3f69282
......@@ -471,6 +471,7 @@ crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-001.xht [
crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-002.xht [ Failure ]
#### external/wpt/css/css-position
crbug.com/907911 external/wpt/css/css-position/position-absolute-percentage-height.html [ Failure ]
crbug.com/752022 external/wpt/css/css-position/position-sticky-offset-overflow.html [ Failure ]
crbug.com/702927 external/wpt/css/css-position/position-sticky-table-tr-top.html [ Failure ]
crbug.com/702927 external/wpt/css/css-position/position-sticky-table-tr-bottom.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-position/position-absolute-container-dynamic.html 0 → 100644
View file @ c3f69282
<!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>
third_party/blink/web_tests/external/wpt/css/css-position/position-absolute-percentage-height.html 0 → 100644
View file @ c3f69282
<!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');
</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