gap-decorations-003.html (1508B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>column-rule-color invalidates and paints correctly on multi-col</title> 5 <link rel="match" href="gap-decorations-003-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors"> 7 <link rel="author" href="mailto:javiercon@microsoft.com"> 8 </head> 9 <style> 10 body { 11 margin: 0px; 12 } 13 #current { 14 color: firebrick; 15 columns: 6; 16 column-gap: 2px; 17 column-rule-style: solid; 18 column-rule-width: 2px; 19 column-fill: auto; 20 height: 20px; 21 column-rule-color: gold; 22 width: 72px; 23 height: 20px; 24 } 25 .items { 26 background-color: lightgreen; 27 height: 20px 28 } 29 </style> 30 <body> 31 <div id="current"> 32 <div class="items"></div> 33 <div class="items"></div> 34 <div class="items"></div> 35 <div class="items"></div> 36 <div class="items"></div> 37 <div class="items"></div> 38 </div> 39 </body> 40 <script> 41 // Use double requestAnimationFrame to remove need of setTimeout. 42 // Wait for the first frame to ensure that the style is computed. 43 requestAnimationFrame(() => { 44 // Wait for the second frame to ensure that the style is painted. 45 requestAnimationFrame(() => { 46 document.getElementById("current").style.columnRuleColor = "hotpink"; 47 document.documentElement.classList.remove("reftest-wait"); 48 }); 49 }); 50 </script> 51 </html>