column-width-001.html (2105B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Animations: column-width animations respond to style changes</title> 6 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cw"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .paused { 11 animation-duration: 4s; 12 animation-timing-function: linear; 13 animation-delay: -2s; 14 animation-play-state: paused; 15 } 16 #container { 17 column-width: 40px; 18 font-size: 10px; 19 } 20 #first { 21 animation-name: first-anim; 22 } 23 #second { 24 animation-name: second-anim; 25 } 26 #third { 27 animation-name: third-anim; 28 } 29 @keyframes first-anim { 30 from { column-width: 3em; } 31 to { column-width: 5em; } 32 } 33 @keyframes second-anim { 34 from { column-width: 40px; } 35 to { column-width: calc(40px - 2em); } 36 } 37 @keyframes third-anim { 38 from { column-width: 20px; } 39 to { column-width: inherit; } 40 } 41 </style> 42 </head> 43 <body> 44 <div id="container"> 45 <div id="first" class="paused"></div> 46 <div id="second" class="paused"></div> 47 <div id="third" class="paused"></div> 48 </div> 49 <script> 50 'use strict'; 51 var container = document.getElementById('container'); 52 53 test(() => { 54 const first = document.getElementById('first'); 55 assert_equals(getComputedStyle(first).columnWidth, '40px'); 56 first.style.fontSize = '20px'; 57 assert_equals(getComputedStyle(first).columnWidth, '80px'); 58 }, 'column-width responds to font-size changes'); 59 60 test(() => { 61 const second = document.getElementById('second'); 62 assert_equals(getComputedStyle(second).columnWidth, '30px'); 63 second.style.fontSize = '90px'; 64 assert_equals(getComputedStyle(second).columnWidth, '20px'); 65 }, 'column-width clamps to 0px'); 66 67 test(() => { 68 const container = document.getElementById('container'); 69 const third = document.getElementById('third'); 70 assert_equals(getComputedStyle(third).columnWidth, '30px'); 71 container.style.columnWidth = 'auto'; 72 assert_equals(getComputedStyle(third).columnWidth, 'auto'); 73 }, 'column-width responds to inherited changes'); 74 </script> 75 </body> 76 </html>