logical-values-float-clear-reftest.html (2347B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Logical Values: Flow-Relative Values for the 'float' property</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> 6 <meta name="assert" content="This test checks that the 'inline-start' and 'inline-end' values of the 'float' and 'clear' properties map to the correct physical value." /> 7 <link rel="match" href="reference/logical-values-float-clear-reftest-ref.html"> 8 <style> 9 .test { 10 display: block; 11 overflow: hidden; 12 width: 300px; 13 } 14 .inline { 15 display: inline; 16 } 17 .float, .clear { 18 display: block; 19 overflow: hidden; 20 height: 3px; 21 width: 100px; 22 background: #f0f; 23 } 24 .clear { 25 background: #0ff; 26 } 27 </style> 28 <body> 29 <script> 30 const sides = ["inline-start", "inline-end"]; 31 const directions = ["ltr", "rtl"]; 32 for (const floatSide of sides) { 33 for (const clearSide of sides) { 34 for (const containerDirection of directions) { 35 for (const inlineParentDirection of [null, ...directions]) { 36 for (const floatDirection of directions) { 37 for (const clearDirection of directions) { 38 const containerEl = document.createElement("div"); 39 containerEl.className = "test"; 40 containerEl.style.direction = containerDirection; 41 const floatEl = document.createElement("div"); 42 floatEl.className = "float"; 43 floatEl.style.direction = floatDirection; 44 floatEl.style.float = floatSide; 45 const clearEl = document.createElement("div"); 46 clearEl.className = "clear"; 47 clearEl.style.direction = floatDirection; 48 clearEl.style.clear = clearSide; 49 if (inlineParentDirection) { 50 const inlineParent = document.createElement("div"); 51 inlineParent.className = "inline"; 52 inlineParent.style.direction = inlineParentDirection; 53 inlineParent.appendChild(floatEl); 54 inlineParent.appendChild(clearEl); 55 containerEl.appendChild(inlineParent); 56 } else { 57 containerEl.appendChild(floatEl); 58 containerEl.appendChild(clearEl); 59 } 60 document.body.appendChild(containerEl); 61 } 62 } 63 } 64 } 65 } 66 } 67 </script> 68 </body>