Skip to content

Commit

Permalink
Bug 1754729 [wpt PR 32796] - WebKit export of https://bugs.webkit.org…
Browse files Browse the repository at this point in the history
…/show_bug.cgi?id=236261, a=testonly

Automatic update from web-platform-tests
Removing layout containment and contained positioned elements (#32796)

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=236261
--

wpt-commits: 74c88b6e862dee2c7d4854ada49b58f7a9f741a2
wpt-pr: 32796
  • Loading branch information
rwlbuis authored and moz-wptsync-bot committed Mar 7, 2022
1 parent 4439078 commit a1b0d50
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 0 deletions.
43 changes: 43 additions & 0 deletions testing/web-platform/tests/css/css-contain/contain-layout-020.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset=utf-8>
<title>CSS Containment Test: Removing layout containment and contained positioned elements</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-020-ref.html">
<meta name=assert content="Removing layout containment relayouts contained positioned elements correctly.">

<style>
#container {
width: 300px;
height: 300px;
contain: layout;
}
.box {
width: 100px;
height: 100px;
background-color: green;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
.abspos {
position: absolute;
top: 0;
right: 0;
}
</style>

<div id="container">
<div class="fixed box"></div>
<div class="abspos box"></div>
</div>

<script>
requestAnimationFrame(() => {
container.style.contain = "none";
document.documentElement.removeAttribute("class");
});
</script>

Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>CSS Containment Test: Removing layout containment and contained positioned elements</title>

<style>
.container {
width: 300px;
height: 300px;
}
.box {
width: 100px;
height: 100px;
background-color: green;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
.abspos {
position: absolute;
top: 0;
right: 0;
}
</style>

<div class="container">
<div class="fixed box"></div>
<div class="abspos box"></div>
</div>

0 comments on commit a1b0d50

Please sign in to comment.