-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add test cases covering 'position-anchor' corner cases. (#48496)
This change adds 2 reftests covering problems found during testing of recent WebKit. See https://bugs.webkit.org/show_bug.cgi?id=279588.
- Loading branch information
Showing
3 changed files
with
184 additions
and
0 deletions.
There are no files selected for viewing
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,70 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Tests 'position-anchor' property when target visibility changes</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> | ||
| <link rel="author" href="mailto:[email protected]"> | ||
| <link rel="match" href="position-anchor-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <script src="/common/rendering-utils.js"></script> | ||
| <style> | ||
| .anchor { | ||
| width: 100px; | ||
| height: 100px; | ||
| background: orange; | ||
| } | ||
|
|
||
| .target { | ||
| position: fixed; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: lime; | ||
| top: anchor(bottom); | ||
| left: anchor(left); | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| #anchor1 { | ||
| anchor-name: --a1; | ||
| margin-left: 100px; | ||
| } | ||
|
|
||
| #target1 { | ||
| position-anchor: --a1; | ||
| } | ||
|
|
||
| #anchor2 { | ||
| anchor-name: --a2; | ||
| margin-left: 300px; | ||
| margin-top: 100px; | ||
| } | ||
|
|
||
| #target2 { | ||
| position-anchor: --a2; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="anchor1" class="anchor">anchor1</div> | ||
| <div id="anchor2" class="anchor">anchor2</div> | ||
|
|
||
| <div id="target1" class="target">target1</div> | ||
| <div id="target2" class="target">target2</div> | ||
|
|
||
| <script> | ||
| // #target2 should be initially visible. | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // Change #target2 to be invisible. | ||
| document.getElementById('target2').style.display = 'none'; | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // #target2 should be invisible now. | ||
| // Change #target2 to be visible. | ||
| document.getElementById('target2').style.display = 'flow'; | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // #target2 should be visible and anchor-positioned again now. | ||
| takeScreenshot(); | ||
| }); | ||
| }); | ||
| }); | ||
| </script> |
44 changes: 44 additions & 0 deletions
44
css/css-anchor-position/position-anchor-target-with-children-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,44 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .anchor { | ||
| width: 100px; | ||
| height: 100px; | ||
| background: orange; | ||
| } | ||
|
|
||
| .target { | ||
| position: fixed; | ||
| background: lime; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| #anchor1 { | ||
| margin-left: 100px; | ||
| } | ||
|
|
||
| #target1 { | ||
| left: 100px; | ||
| top: 100px; | ||
| } | ||
|
|
||
| #anchor2 { | ||
| margin-left: 300px; | ||
| margin-top: 100px; | ||
| } | ||
|
|
||
| #target2 { | ||
| left: 300px; | ||
| top: 300px; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="anchor1" class="anchor">anchor1</div> | ||
| <div id="anchor2" class="anchor">anchor2</div> | ||
|
|
||
| <div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div> | ||
| <div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div> |
70 changes: 70 additions & 0 deletions
70
css/css-anchor-position/position-anchor-target-with-children.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,70 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Tests 'position-anchor' property impact on target's children when target visibility changes</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> | ||
| <link rel="author" href="mailto:[email protected]"> | ||
| <link rel="match" href="position-anchor-target-with-children-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <script src="/common/rendering-utils.js"></script> | ||
| <style> | ||
| .anchor { | ||
| width: 100px; | ||
| height: 100px; | ||
| background: orange; | ||
| } | ||
|
|
||
| .target { | ||
| position: fixed; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: lime; | ||
| top: anchor(bottom); | ||
| left: anchor(left); | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| #anchor1 { | ||
| anchor-name: --a1; | ||
| margin-left: 100px; | ||
| } | ||
|
|
||
| #target1 { | ||
| position-anchor: --a1; | ||
| } | ||
|
|
||
| #anchor2 { | ||
| anchor-name: --a2; | ||
| margin-left: 300px; | ||
| margin-top: 100px; | ||
| } | ||
|
|
||
| #target2 { | ||
| position-anchor: --a2; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="anchor1" class="anchor">anchor1</div> | ||
| <div id="anchor2" class="anchor">anchor2</div> | ||
|
|
||
| <div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div> | ||
| <div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div> | ||
|
|
||
| <script> | ||
| // #target2 should be initially visible. | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // Change #target2 to be invisible. | ||
| document.getElementById('target2').style.display = 'none'; | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // #target2 should be invisible now. | ||
| // Change #target2 to be visible. | ||
| document.getElementById('target2').style.display = 'flow'; | ||
| waitForAtLeastOneFrame().then(() => { | ||
| // #target2 should be visible and anchor-positioned again now. | ||
| takeScreenshot(); | ||
| }); | ||
| }); | ||
| }); | ||
| </script> |