flexbox-dyn-changeOrder-1b.html (1198B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This test checks that we repaint, when a flex item is brought towards 8 the viewer in the stacking-order, without moving in the "x" or "y" 9 dimensions onscreen, using the "order" and "left" properties. 10 11 This test should end up rendering as a lime square, 100px by 100px. 12 --> 13 <html class="reftest-wait"> 14 <head> 15 <style> 16 #container { 17 display: flex; 18 } 19 20 #container > * { 21 width: 100px; 22 height: 100px; 23 position: relative; 24 } 25 26 #a { 27 background-color: red; 28 } 29 30 #b { 31 background-color: lime; 32 } 33 34 .foreground { 35 order: 1; 36 left: -100px; 37 } 38 </style> 39 <script> 40 function tweak() { 41 var a = document.getElementById("a"); 42 var b = document.getElementById("b"); 43 a.classList.remove("foreground"); 44 b.classList.add("foreground"); 45 document.documentElement.removeAttribute("class"); 46 } 47 48 window.addEventListener("MozReftestInvalidate", tweak); 49 </script> 50 </head> 51 <body> 52 <div id="container"> 53 <div id="a" class="foreground"></div> 54 <div id="b"></div> 55 </div> 56 </body> 57 </html>