flexbox-dyn-changeOrder-1a.html (1189B)
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 "margin-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 } 24 25 #a { 26 background-color: red; 27 } 28 29 #b { 30 background-color: lime; 31 } 32 33 .foreground { 34 order: 1; 35 margin-left: -100px; 36 } 37 </style> 38 <script> 39 function tweak() { 40 var a = document.getElementById("a"); 41 var b = document.getElementById("b"); 42 a.classList.remove("foreground"); 43 b.classList.add("foreground"); 44 document.documentElement.removeAttribute("class"); 45 } 46 47 window.addEventListener("MozReftestInvalidate", tweak); 48 </script> 49 </head> 50 <body> 51 <div id="container"> 52 <div id="a" class="foreground"></div> 53 <div id="b"></div> 54 </div> 55 </body> 56 </html>