|
26 | 26 | ] |
27 | 27 | }, |
28 | 28 | { |
29 | | - "html": "<p>Otherwise, <var>anchor spec</var> is a <a class=\"css production\" 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=\"css production\" 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> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-scoping-1/#tree-scoped-name-loosely-matched\" id=\"ref-for-tree-scoped-name-loosely-matched①\">loosely matches</a> <var>anchor spec</var>.</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 | }, |
|
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=\"css production\" 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=\"css production\" 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>\n(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=\"css property\" 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>\nmaintain 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=\"css production\" 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=\"css production\" 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>\n(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=\"css property\" 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>\nmaintain 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>" |
|
59 | 59 | { |
60 | 60 | "name": "apply a position option", |
61 | 61 | "href": "https://drafts.csswg.org/css-anchor-position-1/#apply-a-position-option", |
62 | | - "html": "To <dfn class=\"dfn-paneled has-dfn-panel\" data-dfn-type=\"dfn\" data-noexport=\"\" id=\"apply-a-position-option\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">apply a position option</dfn> to a box’s element <var>el</var>,\n\tgiven a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-option\" id=\"ref-for-position-option⑦\">position option</a> <var>new styles</var>:", |
| 62 | + "html": "To <dfn class=\"dfn-paneled has-dfn-panel\" data-dfn-type=\"dfn\" data-noexport=\"\" id=\"apply-a-position-option\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">apply a position option</dfn> to a box’s element <var>el</var>,\n\tgiven a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-option\" id=\"ref-for-position-option⑨\">position option</a> <var>new styles</var>:", |
63 | 63 | "rationale": ".algorithm", |
64 | 64 | "steps": [ |
65 | 65 | { |
66 | | - "html": "<p>With <var>new styles</var> inserted into the cascade\nin the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-fallback-origin\" id=\"ref-for-position-fallback-origin\">position fallback origin</a>,\nresolve the cascade,\nand perform enough layout to determine <var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#used-value\" id=\"ref-for-used-value②\">used styles</a>.</p>\n <p>For the purpose of calculating these styles,\na <em>hypothetical</em> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-recalculation-point\" id=\"ref-for-anchor-recalculation-point③\">anchor recalculation point</a> is calculated,\nand the resulting hypothetical <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#remembered-scroll-offset\" id=\"ref-for-remembered-scroll-offset⑨\">remembered scroll offsets</a> are used to determine <var>el</var>’s styles.</p>" |
| 66 | + "html": "<p>With <var>new styles</var> inserted into the cascade\nin the <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-fallback-origin\" id=\"ref-for-position-fallback-origin\">position fallback origin</a>,\nresolve the cascade,\nand perform enough layout to determine <var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#used-value\" id=\"ref-for-used-value⑤\">used styles</a>.</p>\n <p>For the purpose of calculating these styles,\na <em>hypothetical</em> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#anchor-recalculation-point\" id=\"ref-for-anchor-recalculation-point③\">anchor recalculation point</a> is calculated,\nand the resulting hypothetical <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#remembered-scroll-offset\" id=\"ref-for-remembered-scroll-offset⑨\">remembered scroll offsets</a> are used to determine <var>el</var>’s styles.</p>" |
67 | 67 | }, |
68 | 68 | { |
69 | | - "html": "<p>Return <var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#used-value\" id=\"ref-for-used-value③\">used styles</a>.</p>" |
| 69 | + "html": "<p>Return <var>el</var>’s <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#used-value\" id=\"ref-for-used-value⑥\">used styles</a>.</p>" |
70 | 70 | } |
71 | 71 | ] |
72 | 72 | }, |
|
104 | 104 | ] |
105 | 105 | }, |
106 | 106 | { |
107 | | - "html": "<p class=\"assertion\">Assert: The previous step finished without finding a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-option\" id=\"ref-for-position-option⑧\">position option</a>\nthat avoids overflow.</p>" |
| 107 | + "html": "<p class=\"assertion\">Assert: The previous step finished without finding a <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-anchor-position-1/#position-option\" id=\"ref-for-position-option①⓪\">position option</a>\nthat avoids overflow.</p>" |
108 | 108 | }, |
109 | 109 | { |
110 | 110 | "html": "<p>Return <var>current styles</var>.</p>" |
|
0 commit comments