-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1754729 [wpt PR 32796] - WebKit export of https://bugs.webkit.org…
…/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
1 parent
4439078
commit a1b0d50
Showing
2 changed files
with
73 additions
and
0 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
testing/web-platform/tests/css/css-contain/contain-layout-020.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
30 changes: 30 additions & 0 deletions
30
testing/web-platform/tests/css/css-contain/reference/contain-layout-020-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |