multicol-gap-decorations-019.html (1596B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>column-rule-color declared with repeaters that depend on currentcolor should be recomputed when currentcolor changes</title> 5 <link rel="match" href="../agnostic/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 14 #current { 15 color: firebrick; 16 columns: 6; 17 column-gap: 2px; 18 column-rule-style: solid; 19 column-rule-width: 2px; 20 column-fill: auto; 21 height: 20px; 22 column-rule-color: repeat(auto, currentColor); 23 24 width: 72px; 25 height: 20px; 26 } 27 28 .items { 29 background-color: lightgreen; 30 height: 20px 31 } 32 </style> 33 </head> 34 <body> 35 <div id="current"> 36 <div class="items"></div> 37 <div class="items"></div> 38 <div class="items"></div> 39 <div class="items"></div> 40 <div class="items"></div> 41 <div class="items"></div> 42 </div> 43 </body> 44 <script> 45 // Use double requestAnimationFrame to remove need of setTimeout. 46 // Wait for the first frame to ensure that the style is computed. 47 requestAnimationFrame(() => { 48 // Wait for the second frame to ensure that the style is painted. 49 requestAnimationFrame(() => { 50 document.getElementById("current").style.color = "hotpink"; 51 document.documentElement.classList.remove("reftest-wait"); 52 }); 53 }); 54 </script> 55 </html>