Changeset 284182 in webkit


Ignore:
Timestamp:
Oct 14, 2021 11:37:42 AM (9 months ago)
Author:
Antti Koivisto
Message:

[CSS Cascade Layers] Layer should have higher priority than its descendant layers
​https://bugs.webkit.org/show_bug.cgi?id=231725

Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

Update from the WPT repo.

  • web-platform-tests/css/css-cascade/layer-basic.html:
  • web-platform-tests/css/css-cascade/layer-counter-style-override-expected.txt:
  • web-platform-tests/css/css-cascade/layer-counter-style-override.html:
  • web-platform-tests/css/css-cascade/layer-font-face-override.html:
  • web-platform-tests/css/css-cascade/layer-import.html:
  • web-platform-tests/css/css-cascade/layer-keyframes-override.html:
  • web-platform-tests/css/css-cascade/layer-property-override-expected.txt:
  • web-platform-tests/css/css-cascade/layer-property-override.html:
  • web-platform-tests/css/css-cascade/layer-scroll-timeline-override-expected.txt:
  • web-platform-tests/css/css-cascade/layer-scroll-timeline-override.html:
  • web-platform-tests/css/css-cascade/presentational-hints-cascade-expected.txt:
  • web-platform-tests/css/css-cascade/presentational-hints-cascade.html:

Source/WebCore:

The spec was updated in ​https://github.com/w3c/csswg-drafts/commit/a6fc16e1b65868c6f984918cc76ad9b238e7139e

"Cascade layers are sorted by the order in which they first are declared, with nested layers grouped
within their parent layers before any unlayered rules."

  • style/RuleSetBuilder.cpp:

(WebCore::Style::RuleSetBuilder::updateCascadeLayerPriorities):

Change the sorting order so parents sort after their children.

  • style/RuleSetBuilder.h:
Location:
trunk
Files:
16 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r284174 r284182  
     12021-10-14  Antti Koivisto  <antti@apple.com>
     2
     3        [CSS Cascade Layers] Layer should have higher priority than its descendant layers
     4        https://bugs.webkit.org/show_bug.cgi?id=231725
     5
     6        Reviewed by Simon Fraser.
     7
     8        Update from the WPT repo.
     9
     10        * web-platform-tests/css/css-cascade/layer-basic.html:
     11        * web-platform-tests/css/css-cascade/layer-counter-style-override-expected.txt:
     12        * web-platform-tests/css/css-cascade/layer-counter-style-override.html:
     13        * web-platform-tests/css/css-cascade/layer-font-face-override.html:
     14        * web-platform-tests/css/css-cascade/layer-import.html:
     15        * web-platform-tests/css/css-cascade/layer-keyframes-override.html:
     16        * web-platform-tests/css/css-cascade/layer-property-override-expected.txt:
     17        * web-platform-tests/css/css-cascade/layer-property-override.html:
     18        * web-platform-tests/css/css-cascade/layer-scroll-timeline-override-expected.txt:
     19        * web-platform-tests/css/css-cascade/layer-scroll-timeline-override.html:
     20        * web-platform-tests/css/css-cascade/presentational-hints-cascade-expected.txt:
     21        * web-platform-tests/css/css-cascade/presentational-hints-cascade.html:
     22
    1232021-10-14  Tim Nguyen  <ntim@apple.com>
    224

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic.html

    r283718 r284182  
    5757        style: `
    5858            @layer {
    59                 target { color: red; }
    60                 @layer {
    61                     target { color: green; }
     59                target { color: green; }
     60                @layer {
     61                    target { color: red; }
    6262                }
    6363            }
    … …  
    6969            @layer {
    7070                @layer {
    71                     target { color: green; }
    72                 }
    73                 target { color: red; }
     71                    target { color: red; }
     72                }
     73                target { color: green; }
    7474            }
    7575        `,
    … …  
    8686            @layer {
    8787                @layer {
    88                     target { color: green; }
    89                 }
    90                 target { color: red; }
     88                    target { color: red; }
     89                }
     90                target { color: green; }
    9191            }
    9292        `,
    … …  
    105105            @layer {
    106106                @layer {
    107                     target { color: green; }
    108                 }
    109                 target { color: red; }
     107                    target { color: red; }
     108                }
     109                target { color: green; }
    110110            }
    111111        `,
    … …  
    123123                @layer {
    124124                    @layer {
    125                         target { color: green; }
     125                        target { color: red; }
    126126                    }
    127127                }
    128                 target { color: red; }
     128                target { color: green; }
    129129            }
    130130        `,
    … …  
    176176        style: `
    177177            @layer A {
    178                 target { color: red; }
    179                 @layer A {
    180                     target { color: green; }
     178                target { color: green; }
     179                @layer A {
     180                    target { color: red; }
    181181                }
    182182            }
    … …  
    363363            @layer A {
    364364                @layer {
    365                     target { color: green; }
    366                 }
    367             }
    368             @layer A {
    369                 target { color: red; }
     365                    target { color: red; }
     366                }
     367            }
     368            @layer A {
     369                target { color: green; }
    370370            }
    371371        `,

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-counter-style-override-expected.txt

    r283162 r284182  
    11
    2 FAIL @counter-style layered overrides unlayered assert_equals: expected "31.21875px" but got "0px"
     2FAIL @counter-style unlayered overrides layered assert_equals: expected "31.21875px" but got "0px"
    33FAIL @counter-style override between layers assert_equals: expected "31.21875px" but got "6px"
    44FAIL @counter-style override update with appended sheet 1 assert_equals: expected "31.21875px" but got "6px"

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-counter-style-override.html

    r283162 r284182  
    3636const testCases = [
    3737  {
    38     title: '@counter-style layered overrides unlayered',
     38    title: '@counter-style unlayered overrides layered',
    3939    style: `
    4040      #target::before {
    … …  
    4242      }
    4343
     44      @counter-style custom-counter-style {
     45        system: extends four;
     46      }
     47
    4448      @layer {
    4549        @counter-style custom-counter-style {
    46           system: extends four;
     50          system: extends three;
    4751        }
    48       }
    49 
    50       @counter-style custom-counter-style {
    51         system: extends three;
    5252      }
    5353    `

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-font-face-override.html

    r283718 r284182  
    2525      }
    2626
     27      @font-face {
     28        font-family: custom-font;
     29        src: url('/fonts/Ahem.ttf');
     30      }
     31
    2732      @layer {
    2833        @font-face {
    … …  
    3035          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
    3136        }
    32       }
    33 
    34       @font-face {
    35         font-family: custom-font;
    36         src: url('/fonts/Ahem.ttf');
    3737      }
    3838    `

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html

    r283718 r284182  
    146146        title: 'C4 Named imports',
    147147        style: `
    148             @import url(layer-green.css) layer(A);
     148            @import url(layer-red.css) layer(A);
    149149            @layer A {
    150                 target { color: red; }
     150                target { color: green; }
    151151            }
    152152        `
    … …  
    193193        style: `
    194194            @import url(basic-red.css) layer(A);
    195             @import url(basic-green.css) layer(B.A);
    196             @import url(basic-red.css) layer(B);
     195            @import url(basic-red.css) layer(B.A);
     196            @import url(basic-green.css) layer(B);
    197197        `
    198198    },

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-keyframes-override.html

    r283718 r284182  
    3030      }
    3131
     32      @keyframes anim {
     33        from { background-color: green; }
     34      }
     35
    3236      @layer {
    3337        @keyframes anim {
    3438          from { background-color: red; }
    3539        }
    36       }
    37 
    38       @keyframes anim {
    39         from { background-color: green; }
    4040      }
    4141    `

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-property-override-expected.txt

    r283162 r284182  
    11
    2 FAIL @property layered overrides unlayered assert_equals: expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
     2FAIL @property unlayered overrides layered assert_equals: expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
    33FAIL @property override between layers assert_equals: expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
    44FAIL @property override update with appended sheet 1 assert_equals: expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-property-override.html

    r283162 r284182  
    2424const testCases = [
    2525  {
    26     title: '@property layered overrides unlayered',
     26    title: '@property unlayered overrides layered',
    2727    style: `
    2828      #target {
    2929        background-color: var(--foo);
     30      }
     31
     32      @property --foo {
     33        syntax: '<color>';
     34        inherits: false;
     35        initial-value: green;
    3036      }
    3137
    … …  
    3440          syntax: '<color>';
    3541          inherits: false;
    36           initial-value: green;
     42          initial-value: red;
    3743        }
    3844      }
    39 
    40       @property --foo {
    41         syntax: '<color>';
    42         inherits: false;
    43         initial-value: red;
    44       }
    45     `
     45   `
    4646  },
    4747

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-scroll-timeline-override-expected.txt

    r283162 r284182  
    11
    2 FAIL @scroll-timeline layered overrides unlayered assert_true: This test requires @scroll-timeline support expected true got false
     2FAIL @scroll-timeline unlayered overrides layered assert_true: This test requires @scroll-timeline support expected true got false
    33FAIL @scroll-timeline override between layers assert_true: This test requires @scroll-timeline support expected true got false
    44FAIL @scroll-timeline override update with appended sheet 1 assert_true: This test requires @scroll-timeline support expected true got false

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-scroll-timeline-override.html

    r283162 r284182  
    4747const testCases = [
    4848  {
    49     title: '@scroll-timeline layered overrides unlayered',
     49    title: '@scroll-timeline unlayered overrides layered',
    5050    style: `
    5151      #target {
    5252        animation-timeline: timeline;
     53      }
     54
     55      @scroll-timeline timeline {
     56        source: selector(#scroller);
     57        start: 0px;
     58        end: 50px;
    5359      }
    5460
    … …  
    5763          source: selector(#scroller);
    5864          start: 0px;
    59           end: 50px;
     65          end: 100px;
    6066        }
    61       }
    62 
    63       @scroll-timeline timeline {
    64         source: selector(#scroller);
    65         start: 0px;
    66         end: 100px;
    6767      }
    6868    `

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/presentational-hints-cascade-expected.txt

    r283162 r284182  
    33PASS Presentational hints have lower precedence than regular author style sheets
    44PASS Presentational hints have lower precedence than the style attribute
     5PASS Presentational hints have lower precedence than layered style
    56

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/presentational-hints-cascade.html

    r283162 r284182  
    1313  width: 100px;
    1414}
     15
     16@layer {
     17  #target3 {
     18    width: 100px;
     19  }
     20}
    1521</style>
    1622
    1723<img class=test id=target1 width=200>
    1824<img class=test id=target2 width=200 style="width: 100px">
     25<img class=test id=target3 width=200>
    1926
    2027<script>
    … …  
    2633  assert_equals(getComputedStyle(target2).width, '100px');
    2734}, 'Presentational hints have lower precedence than the style attribute');
     35
     36test(() => {
     37  assert_equals(getComputedStyle(target3).width, '100px');
     38}, 'Presentational hints have lower precedence than layered style');
    2839</script>

  • trunk/Source/WebCore/ChangeLog

    r284176 r284182  
     12021-10-14  Antti Koivisto  <antti@apple.com>
     2
     3        [CSS Cascade Layers] Layer should have higher priority than its descendant layers
     4        https://bugs.webkit.org/show_bug.cgi?id=231725
     5
     6        Reviewed by Simon Fraser.
     7
     8        The spec was updated in https://github.com/w3c/csswg-drafts/commit/a6fc16e1b65868c6f984918cc76ad9b238e7139e
     9
     10        "Cascade layers are sorted by the order in which they first are declared, with nested layers grouped
     11        within their parent layers before any unlayered rules."
     12
     13        * style/RuleSetBuilder.cpp:
     14        (WebCore::Style::RuleSetBuilder::updateCascadeLayerPriorities):
     15
     16        Change the sorting order so parents sort after their children.
     17       
     18        * style/RuleSetBuilder.h:
     19
    1202021-10-14  Tim Horton  <timothy_horton@apple.com>
    221

  • trunk/Source/WebCore/style/RuleSetBuilder.cpp

    r284078 r284182  
    236236
    237237    auto compare = [&](auto a, auto b) {
    238         while (a && b) {
    239             // Identifiers are in parse order which almost corresponds to the layer priority order.
    240             // The only exception is when a sublayer gets added to a layer after adding other non-sublayers.
    241             // To resolve this we need look for a shared ancestor layer.
     238        while (true) {
     239            // Identifiers are in parse order.
    242240            auto aParent = m_ruleSet->cascadeLayerForIdentifier(a).parentIdentifier;
    243241            auto bParent = m_ruleSet->cascadeLayerForIdentifier(b).parentIdentifier;
    244             if (aParent == bParent || aParent == b || bParent == a)
    245                 break;
     242
     243            // For sibling layers, the later layer in parse order has a higher priority.
     244            if (aParent == bParent)
     245                return a < b;
     246
     247            // For nested layers, the parent layer has a higher priority.
     248            if (aParent == b)
     249                return true;
     250            if (a == bParent)
     251                return false;
     252
     253            // Traverse to parent. Parent layer identifiers are always lower.
    246254            if (aParent > bParent)
    247255                a = aParent;
    … …  
    249257                b = bParent;
    250258        }
    251         return a < b;
    252259    };
    253260

  • trunk/Source/WebCore/style/RuleSetBuilder.h

    r283718 r284182  
    7575    const ShrinkToFit m_shrinkToFit { ShrinkToFit::Enable };
    7676
    77     CascadeLayerName m_resolvedCascadeLayerName { };
    78     HashMap<CascadeLayerName, RuleSet::CascadeLayerIdentifier> m_cascadeLayerIdentifierMap { };
     77    CascadeLayerName m_resolvedCascadeLayerName;
     78    HashMap<CascadeLayerName, RuleSet::CascadeLayerIdentifier> m_cascadeLayerIdentifierMap;
    7979    RuleSet::CascadeLayerIdentifier m_currentCascadeLayerIdentifier { 0 };
    8080
    81     Vector<RuleSet::ResolverMutatingRule> m_collectedResolverMutatingRules { };
     81    Vector<RuleSet::ResolverMutatingRule> m_collectedResolverMutatingRules;
    8282    bool didSeeResolverMutationWithinDynamicMediaQuery { false };
    8383};
Note: See TracChangeset for help on using the changeset viewer.