-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[popover][anchor-position] Implement implicit anchoring (2/2)
- https://drafts.csswg.org/css-anchor-1/#implicit-anchor-element - josepharhar/html#2 This is the 2/2 patch implementing implicit anchoring for popovers, focusing on layout-level changes. With the info of which elements are used as implicit anchors, this patch adds the implicit anchors into NG*AnchorQuery with LayoutObject as keys, so that implicit anchor queries can be evaluated without an anchor name. At a more detailed level, now all the NG*AnchorQuery classes need to maintain two hashmaps: one keyed by names for the named anchors, and the other keyed by LayoutObjects for the implicit anchors. To reduce code verbosity, the common structure of these classes is abstracted into a base class NGAnchorQueryBase. Bug: 1307772, 1380112 Change-Id: I9bdec5e3c08f9b9b20442503dedf32995643f037
- Loading branch information
1 parent
3765a63
commit a639504
Showing
5 changed files
with
167 additions
and
1 deletion.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
html/semantics/popovers/popover-anchor-change-display-ref.tentative.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,24 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
|
|
||
| <p>There should be a green box attached to the right side of each orange box.</p> | ||
| <div class=ex><div class=anchor></div><div class=popover></div></div> | ||
| <div class=ex><div class=anchor></div><div class=popover></div></div> | ||
|
|
||
| <style> | ||
| .ex { | ||
| margin: 25px; | ||
| font-size: 0; | ||
| } | ||
| .ex div { | ||
| display:inline-block; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| .anchor { | ||
| background: orange; | ||
| } | ||
| .popover { | ||
| background: lime; | ||
| } | ||
| </style> |
50 changes: 50 additions & 0 deletions
50
html/semantics/popovers/popover-anchor-change-display.tentative.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,50 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <link rel=author href="mailto:xiaochengh@chromium.org"> | ||
| <link rel=help href="https://open-ui.org/components/popup.research.explainer"> | ||
| <link rel=match href="popover-anchor-change-display-ref.tentative.html"> | ||
| <script src="resources/popover-utils.js"></script> | ||
|
|
||
| <p>There should be a green box attached to the right side of each orange box.</p> | ||
|
|
||
| <div class=ex> | ||
| <div class=anchor id=anchor1></div> | ||
| <div id=popover1 popover=manual defaultopen></div> | ||
| </div> | ||
|
|
||
| <div class=ex> | ||
| <div class=anchor id=will-be-anchor2></div> | ||
| <div id=popover2 popover=manual anchor=anchor2 defaultopen></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| showDefaultopenPopoversOnLoad(); | ||
|
|
||
| function runTest() { | ||
| document.body.offsetLeft; // Force layout | ||
|
|
||
| document.getElementById('popover1').setAttribute('anchor', 'anchor1'); | ||
| document.getElementById('will-be-anchor2').setAttribute('id', 'anchor2'); | ||
| } | ||
| window.addEventListener('load', runTest); | ||
| </script> | ||
|
|
||
| <style> | ||
| .ex { | ||
| margin: 25px; | ||
| } | ||
| .ex div { | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| .anchor { | ||
| background: orange; | ||
| } | ||
| [popover] { | ||
| background: lime; | ||
| padding:0; | ||
| border:0; | ||
| left: anchor(right); | ||
| top: anchor(top); | ||
| } | ||
| </style> |
33 changes: 33 additions & 0 deletions
33
html/semantics/popovers/popover-anchor-display-none.tentative.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>Tests that a popover can be anchored to an unrendered element.</title> | ||
| <link rel=author href="mailto:xiaochengh@chromium.org"> | ||
| <link rel=help href="https://open-ui.org/components/popup.research.explainer"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <div id=popover popover anchor=anchor></div> | ||
| <div id=anchor></div> | ||
|
|
||
| <style> | ||
| #anchor { | ||
| display: none; | ||
| } | ||
| [popover] { | ||
| background: lime; | ||
| padding: 0; | ||
| border: 0; | ||
| width: 100px; | ||
| height: 100px; | ||
| top: anchor(top, 100px); | ||
| left: anchor(left, 100px); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| test(() => { | ||
| popover.showPopover(); | ||
| assert_equals(popover.offsetLeft, 100); | ||
| assert_equals(popover.offsetTop, 100); | ||
| }); | ||
| </script> |
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
59 changes: 59 additions & 0 deletions
59
html/semantics/popovers/popover-anchor-multicol-display.tentative.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,59 @@ | ||
| <!DOCTYPE html> | ||
| <title>Tests popovers with implicit anchors in out-of-flow boxes</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> | ||
| <link rel="author" href="mailto:xiaochengh@chromium.org"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/check-layout-th.js"></script> | ||
|
|
||
| <style> | ||
| .relpos { | ||
| position: relative; | ||
| } | ||
| .columns { | ||
| column-count: 2; | ||
| column-fill: auto; | ||
| column-gap: 10px; | ||
| column-width: 100px; | ||
| width: 210px; | ||
| height: 50px; | ||
| } | ||
| #anchor1 { | ||
| position: absolute; | ||
| width: 10px; | ||
| height: 30px; | ||
| background: orange; | ||
| } | ||
| .target { | ||
| /* Force showing a closed popover with CSS so that it's not top-layer */ | ||
| display: block; | ||
| position: absolute; | ||
| margin: 0; | ||
| border: 0; | ||
| padding: 0; | ||
| width: anchor-size(width); | ||
| height: anchor-size(height); | ||
| background: lime; | ||
| } | ||
| </style> | ||
| <body onload="checkLayout('.target')"> | ||
| <div class="spacer" style="height: 10px"></div> | ||
| <div class="relpos"> | ||
| <div class="columns"> | ||
| <div class="spacer" style="height: 10px"></div> | ||
| <div class="relpos"> | ||
| <div class="spacer" style="height: 10px"></div> | ||
| <div class="relpos"> | ||
| <div class="spacer" style="height: 10px"></div> | ||
| <div id="anchor1"></div> | ||
| </div> | ||
| <div class="target" popover anchor="anchor1" | ||
| data-expected-height=50></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|