|
18 | 18 | "rationale": "if", |
19 | 19 | "steps": [ |
20 | 20 | { |
21 | | - "html": "<p>If the Popover API defines an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element\" id=\"ref-for-implicit-anchor-element④\">implicit anchor element</a> for <var>query el</var> which is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#acceptable-anchor-element\" id=\"ref-for-acceptable-anchor-element①\">acceptable anchor element</a> for <var>query el</var>,\nreturn that element.</p>" |
| 21 | + "html": "<p>If the Popover API defines an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element\" id=\"ref-for-implicit-anchor-element③\">implicit anchor element</a> for <var>query el</var> which is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#acceptable-anchor-element\" id=\"ref-for-acceptable-anchor-element①\">acceptable anchor element</a> for <var>query el</var>,\nreturn that element.</p>" |
22 | 22 | }, |
23 | 23 | { |
24 | 24 | "html": "<p>Otherwise, return nothing.</p>" |
25 | 25 | } |
26 | 26 | ] |
27 | 27 | }, |
28 | 28 | { |
29 | | - "html": "<p>Otherwise, <var>anchor spec</var> is a <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-values-4/#typedef-dashed-ident\" id=\"ref-for-typedef-dashed-ident⑤\"><dashed-ident></a>.\nReturn the last element <var>el</var> in tree order\nthat satisfies the following conditions:</p>\n <ul>\n <li data-md=\"\">\n <p><var>el</var> is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-element\" id=\"ref-for-anchor-element④\">anchor element</a> with an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-name\" id=\"ref-for-anchor-name①③\">anchor name</a> of <var>anchor spec</var>.</p>\n </li><li data-md=\"\">\n <p><var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-name\" id=\"ref-for-anchor-name①④\">anchor name</a> and <var>anchor spec</var> are both associated with the same <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org/#concept-tree\" id=\"ref-for-concept-tree\">tree</a> <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org/#concept-tree-root\" id=\"ref-for-concept-tree-root\">root</a>.</p>\n \n </li><li data-md=\"\">\n <p><var>el</var> is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#acceptable-anchor-element\" id=\"ref-for-acceptable-anchor-element②\">acceptable anchor element</a> for <var>query el</var>.</p>\n </li></ul>\n <p>If no element satisfies these conditions,\nreturn nothing.</p>" |
| 29 | + "html": "<p>Otherwise, <var>anchor spec</var> is a <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-values-4/#typedef-dashed-ident\" id=\"ref-for-typedef-dashed-ident⑥\"><dashed-ident></a>.\nReturn the last element <var>el</var> in tree order\nthat satisfies the following conditions:</p>\n <ul>\n <li data-md=\"\">\n <p><var>el</var> is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-element\" id=\"ref-for-anchor-element④\">anchor element</a> with an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-name\" id=\"ref-for-anchor-name①⑤\">anchor name</a> of <var>anchor spec</var>.</p>\n </li><li data-md=\"\">\n <p><var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-name\" id=\"ref-for-anchor-name①⑥\">anchor name</a> and <var>anchor spec</var> are both associated with the same <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org/#concept-tree\" id=\"ref-for-concept-tree\">tree</a> <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org/#concept-tree-root\" id=\"ref-for-concept-tree-root\">root</a>.</p>\n \n </li><li data-md=\"\">\n <p><var>el</var> is an <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#acceptable-anchor-element\" id=\"ref-for-acceptable-anchor-element②\">acceptable anchor element</a> for <var>query el</var>.</p>\n </li></ul>\n <p>If no element satisfies these conditions,\nreturn nothing.</p>" |
30 | 30 | } |
31 | 31 | ] |
32 | 32 | }, |
|
40 | 40 | "html": "<p>If <var>directions</var> are opposites along the same axis,\nthey are “opposing”.\nOtherwise (when they are specifying different axises),\nthey are “perpendicular”.</p>" |
41 | 41 | }, |
42 | 42 | { |
43 | | - "html": "<p>Determine the specified values of the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#accepted-position-try-properties\" id=\"ref-for-accepted-position-try-properties②\">accepted @position-try properties</a> on <var>el</var>,\nand let <var>styles</var> be the result.</p>" |
| 43 | + "html": "<p>Determine the specified values of the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#accepted-position-try-properties\" id=\"ref-for-accepted-position-try-properties①\">accepted @position-try properties</a> on <var>el</var>,\nand let <var>styles</var> be the result.</p>" |
44 | 44 | }, |
45 | 45 | { |
46 | 46 | "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/css-variables-1/#substitute-a-var\" id=\"ref-for-substitute-a-var\">Substitute variables</a>, <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-env-1/#funcdef-env\" id=\"ref-for-funcdef-env\">env()</a> functions,\nand similar <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-values-5/#arbitrary-substitution-function\" id=\"ref-for-arbitrary-substitution-function\">arbitrary substitution functions</a> in <var>styles</var>.</p>\n <p>For <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-env-1/#funcdef-env\" id=\"ref-for-funcdef-env①\">env()</a> functions,\nif the referenced <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-env-1/#css-environment-variable\" id=\"ref-for-css-environment-variable\">environment variable</a> is associated with a direction or axis\n(such as <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-env-1/#valdef-env-safe-area-inset-top\" id=\"ref-for-valdef-env-safe-area-inset-top\">safe-area-inset-top</a>),\nswitch the referenced <span id=\"ref-for-css-environment-variable①\">environment variable</span> corresponding to <var>directions</var>.</p>" |
|
49 | 49 | "html": "<p>Swap the values of the <var>styles</var> between\nthe associated properties\ncorresponding to <var>directions</var>.</p>" |
50 | 50 | }, |
51 | 51 | { |
52 | | - "html": "<p>Modify the values of the properties\nas they swap to match the new directions,\nas follows:</p>\n <ul>\n <li data-md=\"\">\n <p>For <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-logical-1/#inset-properties\" id=\"ref-for-inset-properties①⑨\">inset properties</a>,\nchange the specified side in <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor\" id=\"ref-for-funcdef-anchor①⑧\">anchor()</a> functions\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n <p>If a <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-values-4/#percentage-value\" id=\"ref-for-percentage-value②\"><percentage></a> is used,\nand <var>directions</var> are opposing,\nchange it to <span class=\"css\">100%</span> minus the original percentage.</p>\n \n </li><li data-md=\"\">\n <p>For <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#sizing-property\" id=\"ref-for-sizing-property②\">sizing properties</a>,\nchange the specified axis in <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor-size\" id=\"ref-for-funcdef-anchor-size⑨\">anchor-size()</a> functions\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li><li data-md=\"\">\n <p>For the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-align-3/#self-alignment-properties\" id=\"ref-for-self-alignment-properties④\">self-alignment properties</a>,\nif <var>directions</var> are opposing,\nchange the specified <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-align-3/#typedef-self-position\" id=\"ref-for-typedef-self-position\" title=\"Expands to: center | end | flex-end | flex-start | self-end | self-start | start\"><self-position></a> (or <span class=\"css\">left</span>/<span class=\"css\">right</span> keywords),\nif any,\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li><li data-md=\"\">\n <p>For <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-anchor-position-1/#propdef-position-area\" id=\"ref-for-propdef-position-area①②\">position-area</a>,\nchange the value\nso that the selected rows/columns of the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-area-grid\" id=\"ref-for-position-area-grid③\">position-area grid</a> maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li></ul>" |
| 52 | + "html": "<p>Modify the values of the properties\nas they swap to match the new directions,\nas follows:</p>\n <ul>\n <li data-md=\"\">\n <p>For <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-logical-1/#inset-properties\" id=\"ref-for-inset-properties①⑦\">inset properties</a>,\nchange the specified side in <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor\" id=\"ref-for-funcdef-anchor①⑨\">anchor()</a> functions\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n <p>If a <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-values-4/#percentage-value\" id=\"ref-for-percentage-value②\"><percentage></a> is used,\nand <var>directions</var> are opposing,\nchange it to <span class=\"css\">100%</span> minus the original percentage.</p>\n \n </li><li data-md=\"\">\n <p>For <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-sizing-3/#sizing-property\" id=\"ref-for-sizing-property①\">sizing properties</a>,\nchange the specified axis in <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor-size\" id=\"ref-for-funcdef-anchor-size①⓪\">anchor-size()</a> functions\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li><li data-md=\"\">\n <p>For the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-align-3/#self-alignment-properties\" id=\"ref-for-self-alignment-properties④\">self-alignment properties</a>,\nif <var>directions</var> are opposing,\nchange the specified <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-align-3/#typedef-self-position\" id=\"ref-for-typedef-self-position\" title=\"Expands to: center | end | flex-end | flex-start | self-end | self-start | start\"><self-position></a> (or <span class=\"css\">left</span>/<span class=\"css\">right</span> keywords),\nif any,\nto maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li><li data-md=\"\">\n <p>For <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-anchor-position-1/#propdef-position-area\" id=\"ref-for-propdef-position-area①①\">position-area</a>,\nchange the value\nso that the selected rows/columns of the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-area-grid\" id=\"ref-for-position-area-grid④\">position-area grid</a> maintain the same relative relationship to the new direction\nthat they had to the old.</p>\n \n </li></ul>" |
53 | 53 | }, |
54 | 54 | { |
55 | 55 | "html": "<p>Return <var>styles</var>.</p>" |
|
0 commit comments