grid-order-with-slots.html (5193B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-order in Shadow DOM</title> 5 <link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow"> 6 <link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src='../../resources/shadow-dom.js'></script> 13 <script src="../../resources/focus-utils.js"></script> 14 15 <style> 16 .wrapper { 17 display: grid; 18 reading-flow: grid-order; 19 } 20 </style> 21 22 <span id="host1" class="test-case" data-expect="b1,a1,c1" 23 data-description="Slot assigned element is a grid with reading-flow."> 24 <template shadowrootmode="open"> 25 <style> 26 .wrapper { 27 display: grid; 28 reading-flow: grid-order; 29 } 30 </style> 31 <slot></slot> 32 </template> 33 <div class="wrapper"> 34 <button style="order: 2" id="a1">Item A</button> 35 <button style="order: 1" id="b1">Item B</button> 36 <button style="order: 3" id="c1">Item C</button> 37 </div> 38 </span> 39 <br> 40 41 <span id="host2" class="test-case" data-expect="b2,a2,c2" 42 data-description="Slot is a grid with reading-flow."> 43 <template shadowrootmode="open"> 44 <style> 45 .wrapper { 46 display: grid; 47 reading-flow: grid-order; 48 } 49 </style> 50 <slot class="wrapper"></slot> 51 </template> 52 <button style="order: 2" id="a2">Item A</button> 53 <button style="order: 1" id="b2">Item B</button> 54 <button style="order: 3" id="c2">Item C</button> 55 </span> 56 <br> 57 58 <span id="host3" class="test-case" data-expect="o1,o3,o5,host3/o2,host3/o4" 59 data-description="Slot is inside a grid container with reading-flow."> 60 <template shadowrootmode="open"> 61 <style> 62 .wrapper { 63 display: grid; 64 reading-flow: grid-order; 65 } 66 </style> 67 <div class="wrapper"> 68 <button style="order: 4" id="o4">Order 4</button> 69 <slot style="order: 10"></slot> 70 <button style="order: 2" id="o2">Order 2</button> 71 </div> 72 </template> 73 <button style="order: 5" id="o5">Slotted 5</button> 74 <button style="order: 1" id="o1">Slotted 1</button> 75 <button style="order: 3" id="o3">Slotted 3</button> 76 </span> 77 <br> 78 79 <span id="host4" class="test-case" 80 data-expect="b4,a4,d42,d41,d43,c4,host4/after,host4/before" 81 data-description="Slot is a grid with reading-flow inside a grid container with reading-flow."> 82 <template shadowrootmode="open"> 83 <style> 84 .wrapper { 85 display: grid; 86 reading-flow: grid-order; 87 } 88 </style> 89 <div class="wrapper"> 90 <button style="order: 4" id="before">Before</button> 91 <slot style="order: 10"></slot> 92 <button style="order: 2" id="after">After</button> 93 </div> 94 </template> 95 <button style="order: 3" id="a4">Item A</button> 96 <button style="order: 1" id="b4">Item B</button> 97 <button style="order: 6" id="c4">Item C</button> 98 <div style="order: 5" class="wrapper"> 99 <button style="order: 2" id="d41">Item D1</button> 100 <button style="order: 1" id="d42">Item D2</button> 101 <button style="order: 3" id="d43">Item D3</button> 102 </div> 103 </span> 104 <br> 105 106 <span id="host5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52" 107 data-description="Slot is not inside a shadow host."> 108 <div class="wrapper"> 109 <slot name=slot1> 110 <button style="order: 2" id="a51">Item A</button> 111 <button style="order: 1" id="b51">Item B</button> 112 <button style="order: 3" id="c51">Item C</button> 113 </slot> 114 </div> 115 <slot class="wrapper" name=slot2> 116 <button style="order: 2" id="a52">Item A</button> 117 <button style="order: 1" id="b52">Item B</button> 118 <button style="order: 3" id="c52">Item C</button> 119 </slot> 120 </span> 121 <br> 122 123 <span id="host6" class="test-case" data-expect="b6,a6,host6/after,host6/before" 124 data-description="Slot is a display contents inside a grid container."> 125 <template shadowrootmode="open"> 126 <style> 127 .wrapper { 128 display: grid; 129 reading-flow: grid-order; 130 } 131 </style> 132 <div class="wrapper"> 133 <button style="order: 4" id="before">Before</button> 134 <slot style="display: contents" style="order: 4"></slot> 135 <button style="order: 3" id="after">After</button> 136 </div> 137 </template> 138 <button id="a6" style="order: 7">A</button> 139 <button id="b6" style="order: 2">B</button> 140 </span> 141 <br> 142 143 <span id="host7" class="test-case" data-expect="host7/after,a7,b7,host7/before" 144 data-description="Slot is a display block inside a grid container."> 145 <template shadowrootmode="open"> 146 <style> 147 .wrapper { 148 display: grid; 149 reading-flow: grid-order; 150 } 151 </style> 152 <div class="wrapper"> 153 <button style="order: 5" id="before">Before</button> 154 <slot style="display: block; order: 4"></slot> 155 <button style="order: 3" id="after">After</button> 156 </div> 157 </template> 158 <button id="a7" style="order: 7">A</button> 159 <button id="b7" style="order: 2">B</button> 160 </span> 161 <br> 162 163 <script> 164 runFocusTestCases(); 165 </script>